'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.

jqueryhtmlformscheckboxinput


Solution 1:[1]

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>

Solution 2:[2]

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);} 
        });

Solution 3:[3]

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>

Solution 4:[4]

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

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

Solution 5:[5]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Praveen Kumar Purushothaman
Solution 2 Praveen Kumar Purushothaman
Solution 3
Solution 4 Praveen Kumar Purushothaman
Solution 5

Related Questions