Using jQuery to Disable a Button

We can use jQuery to disable a submit button on a form. The easiest way to do this is using the jQuery prop() method.

$('button').prop('disabled', true);

Here we can use the prop method on the button input, and change its disabled property to true.

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery('button').prop('disabled', true);

An example of using jQuery to enable/disable a button on a form

Below we will have a simple form with first name and last name fields and a submit button. One thing that is common in a lot of online forms is having a checkbox that a user must click on to agree to certain terms/conditions. So below we will have a form that only lets you submit the information if you agree to the terms/conditions, by checking the checkbox. Here is the HTML code:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="checkbox" id="checkbox" name="checkbox" value="Checkbox">
  <label for="checkbox"> I agree to the terms and conditions.</label><br><br>
  <button type="submit" value="Submit" disabled>Submit</button>
</form>

We will then use jQuery to disable or enable the submit button based on whether the checkbox is checked or not. Here is the code:

$("#checkbox").click(function(){
  if( $('#checkbox').is(':checked') ){
    $('button').prop('disabled', false);
  } else {
    $('button').prop('disabled', true);
  } 
});

The final code and output for this example of how to enable and disable a submit button using jQuery is below:

Code Output:

Full Code:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="checkbox" id="checkbox" name="checkbox" value="Checkbox"><label for="checkbox"> I agree to the terms and conditions.</label><br><br>
  <button type="submit" value="Submit" disabled>Submit</button>
</form>

<script>

$("#checkbox").click(function(){
  if( $('#checkbox').is(':checked') ){
    $('button').prop('disabled', false);
  } else {
    $('button').prop('disabled', true);
  } 
});

</script>