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:

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:

  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:

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

Categorized in:


Last Update: February 26, 2024