CODEWITHSUNDEEP
jqueryhtmlformscheckboxinput
Jake B
Jake B

Reputation: 27

How to disable / enable an input field with a checkbox

Current code:

<form>
  <div class="form-group" id="deadline" >
    <input type="text" class="datepicker form-control" id="deadline" name="deadline" placeholder="DD/MM/YYYY" >
    <input type="checkbox" value="ongoing" name="Ongoing" id="ongoing" >
    <label for="ongoing">Ongoing</label>
  </div>
</form>

how do i make it so that checking the "Ongoing" checkbox disables the "deadline" input field? Thanks ahead of time.

Upvotes: 0

Views: 1586

Answers (6)

arun s r
arun s r

Reputation: 57

Remove or rename that form-control div to some other name.The same id name for input tag and div is conflicting and the code is looking for the first one .Thats why here no codes working.I edited accordingly.Kindly go through it.include jquery .Its important.

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>


<script>
$(function () {
        $("input[name='Ongoing']").click(function () {
            if ($("#ongoing").is(":checked")) {
                $("#deadline").removeAttr("disabled");
                
              
                
            } else {
                $("#deadline").attr("disabled", "disabled");
                
                 
            }
        });
    });
</script>

</head>

i edited your code as required.

<body>
<form>
  <div class="form-group" id="deadlinediv" >
    <input type="text" class="datepicker form-control" id="deadline" name="deadline" placeholder="DD/MM/YYYY" disabled="disabled">
    <input type="checkbox" value="ongoing" name="Ongoing" id="ongoing" >
    <label for="ongoing">Ongoing</label>
  </div>
</form>
</body>
</html>

So many other ways already explained .May be this too will help somebody.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167220

The more better and quicker solution than the one provided is:

$('#ongoing').change(function() {
  $('#deadline').prop('disabled', this.checked);
});

Upvotes: 0

Danyal Sandeelo
Danyal Sandeelo

Reputation: 12401

Add an onclick event and call a function like this: and remove id of this div <div class="form-group" id="deadline" > since you are using the same id for field.

<html>


<script>
var disabled=0;
function disableEnableField(){

    if(disabled==0){ //disable
     document.getElementById('deadline').disabled = true;
       disabled=1; 
     } 
    else{  //enable again
     document.getElementById('deadline').disabled = false;
      disabled=0; 
    } 
}
</script>

<form>
  <div class="form-group" >
    <input type="text" class="datepicker form-control"  id="deadline" name="deadline" placeholder="DD/MM/YYYY" >
    <input type="checkbox" value="ongoing" onclick="disableEnableField()" name="Ongoing" id="ongoing" >
    <label  >Ongoing</label>
  </div>
</form>


</html>

Upvotes: 0

Majid
Majid

Reputation: 72

please use jQuery or javascript 

<form>
  <div class="form-group" id="deadline" >
    <input type="text" class="datepicker form-control" id="deadline" name="deadline" placeholder="DD/MM/YYYY" >
    <input type="checkbox" value="ongoing" name="Ongoing" id="ongoing" >
    <label for="ongoing">Ongoing</label>
  </div>
</form>


<script>
 $("#ongoing).change(function(){
    if($(this).is(':checked')
   {
     $('#deadline').attr('disabled','disabled');
   }
    else{
                  $('#deadline').removeAttr('disabled');
        }
 });
<script>

Upvotes: 1

Sameer
Sameer

Reputation: 705

you can use jQuery for this...Your code will be as follow- 

 $('#ongoing').change(function() {
            if($(this).is(":checked")) {
                $('#deadline').prop('disabled',false);
            }
          else
    {  $('#deadline').prop('disabled',true);} 
        });

Upvotes: 0

Mojo Allmighty
Mojo Allmighty

Reputation: 793

Using jQuery would be easiest way in my opinion

$('#ongoing').change(function() {
  if(this.checked) {
    $('#deadline').prop('disabled',true);
  } else {
    $('#deadline').prop('disabled',false);
  }
});

Upvotes: 0

Related Questions