1117 Votes

jQuery: Disable Submit Button if no Checkbox is selected

Tutorial by Stefan Trost | Last update on 2023-02-22 | Created on 2014-03-18

Sometimes, we would like to allow submitting a form only if one or at least one check box is checked. In this little tutorial, I would like to show you how to do this using JavaScript and jQuery.

The following script is making sure that the submit button is only active or enabled when at least one checkbox of the corresponding form is selected.


Our HTML is a simple form containing three checkboxes and one submit button:

<form action="">
   <input class="cbox" type="checkbox" name="cb1" value="1"> 1
   <input class="cbox" type="checkbox" name="cb2" value="2"> 2
   <input class="cbox" type="checkbox" name="cb3" value="3"> 3
   <input id="bt_submit" type="submit" value="Send">


We let the following jQuery code execute immediately after loading the HTML page by using $(document).ready():

<script type="text/javascript">

  $(document).ready(function() { 

     $('#bt_submit').attr("disabled", true);

     $('.cbox').change(function() {
        $('#bt_submit').attr('disabled', $('.cbox:checked').length == 0);



First of all, we set our submit button to disabled (more on that in the next section). After that, we apply a function to the checkboxes that is called whenever a checkbox is changed. This function is adjusting the state of the submit botton depending on the selection state. For this, we check the number of selected checkboxes to be 0 and set the disabled-attribute depending on this condition.

Important: Consider Users with deactivated JavaScript

This function is only working when JavaScript is activated in the browser of the user. It is no replacement of a check of the user input at server-side which should be carried out additionally.

For this reason, we also set the "disabled" attribute of the submit button in our JavaScript code and not already in the HTML, which could also be done theoretically. The submit button is initially not deactivated when loading the page, even if no checkbox is selected at this time. For users with active JavaScript, the button is deactivated immediately after the loading, these users do not notice that the button was once active. For users with deactivated JavaScript, the JavaScript code cannot be executed. The button remains active for these users and the form usable. If we had immediately put the button on disabled via HTML, the form would not be usable for these users.

1113 Votes

And if you only have one checkbox, it is even much more easier to implement:

$("#cbox").click(function() {
   $("#bt_submit").attr("disabled", !this.checked);

In this.checked it is stored, whether the clicked checkbox is selected or not.

With using !this.checked we can set our submit button to exactly the opposite.
2014-03-18 at 22:04

ReplyPositive Negative
11 Vote

Thanks for this instruction of checkboxes.
2018-05-16 at 07:02

ReplyPositive Negative
11 Vote

Thank you so much! I'm facing a bit of a problem because it doesn't work when I switch to another page on the table although they have the same id as those on the first page.
2019-02-14 at 16:23

ReplyPositive Negative
33 Votes

I'm not a JavaScript expert, but would like to ask what the whole thing looks like when two checkboxes have to be clicked before the send button is activated?
2022-11-15 at 22:03

ReplyPositive Negative
11 Vote

Do you mean something like this:

$('.cbox').change(function() {
    $('#cbox1:checked') && $('#cbox2:checked'));

Your checkboxes both have to have the class "cbox" and one checkbox the ID "cbox1" and the other the ID "cbox2".
2022-11-16 at 14:23

Positive Negative
11 Vote



$('.chkfield').change(function() {
     $('#cbox1:checked').length ==
     0 || $('#cbox2:checked').length == 0);

That is the complete correct solution.
2022-11-19 at 16:07

Positive Negative
00 Votes

Yes, that was it.

Thank you very much for the super quick help!
2022-11-16 at 21:25

Positive Negative

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.