How do I disable/enable a form element?

Sometimes you need to enable or disable input elements or form elements in jQuery. In such cases, you can use jQuery prop() method to disable or enable input elements/form elements dynamically using jQuery.

 
// Disable #elements
$( "#elements" ).prop( "disabled", true );

 
// Enable #elements
$( "#elements" ).prop( "disabled", false );

example

 
$(".chkAgree").click(function(){
  if($(this).prop("checked") == true){
      $('form input[type="submit"]').prop("disabled", false);
  }
  else if($(this).prop("checked") == false){
      $('form input[type="submit"]').prop("disabled", true);
  }
});

 
<input type="checkbox" class="chkAgree">

Full Source

 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Disable/Enable form element with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('form input[type="submit"]').prop("disabled", true);
  $(".chkAgree").click(function(){
    if($(this).prop("checked") == true){
        $('form input[type="submit"]').prop("disabled", false);
    }
    else if($(this).prop("checked") == false){
        $('form input[type="submit"]').prop("disabled", true);
    }
  });
});
</script>
</head>
<body>
<form>
    <input type="checkbox" class="chkAgree">
    <label>Click here to enable this button</label>
    <input type="submit" value="Submit">
</form>
</body>
</html>

jQuery 1.5 and below

The jQuery .prop() method doesn't exist jQuery 1.5 and below , in such cases you can use jQuery .attr() method .

 
// Disable #elements
$("input").attr('disabled','disabled');

 
// Enable #elements
$("input").removeAttr('disabled');

It is important to note that, you can always rely on the actual DOM object and is probably a little faster than the above two options if you are only dealing with one element:

 
// assuming an event handler thus 'this'
this.disabled = true;

JavaScript

In JavaScript you can use the following code to disable/enable an element.

 
document.getElementById("myText").disabled = true;

The disabled property sets or returns whether a text field is disabled, or not.

Next : Hide and show image on button click using jQuery