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:

  First name:
  


  Last name:
  


  
   I agree to the terms and conditions.


  Submit

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:

  First name:
  


  Last name:
  


   I agree to the terms and conditions.


  Submit


<script>

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

</script>