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>
Leave a Reply