jQuery: Disable Submit Button if no Checkbox is selected

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.

HTML

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">
</form>

JavaScript/jQuery

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);
     });

  });

</script>

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.