Demo Download

When working with web forms, there are various situations where you need to enable or disable submit button, today I am going to share how to enable or disable submit button if at least one checkbox is checked using jQuery.

Following is the simple HTML form having checkboxes and submit button.

HTML

<form method="post" action="">
<input class="checks" type="checkbox" name="football" value="football" />
Football<br/>
<input class="checks" type="checkbox" name="cricket" value="cricket" />
Cricket<br/>
<input class="checks" type="checkbox" name="hockey" value="hockey" />
Hockey<br/><br/>
<input type="submit" id="submit" value="Submit" />
</form>

jQuery

$('#submit').prop("disabled", true);
$('input:checkbox').click(function() {
 if ($(this).is(':checked')) {
 $('#submit').prop("disabled", false);
 } else {
 if ($('.checks').filter(':checked').length < 1){
 $('#submit').attr('disabled',true);}
 }
});

In the above jQuery script you can see that submit button is disabled by default. However submit button will be enable it at least one checkbox is checked.

Don’t forget to add jQuery library before the above script.

Demo Download

If you found this tutorial helpful, kindly share it with your friends and developer groups.

Facebook Official Page: All PHP Tricks

Twitter Official Page: All PHP Tricks