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 tip, I would like to show you how to do this using jQuery. The following script is making sure that the submit button is only active or enabled when at least one checkbox 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 our jQuery code execute after loading the document ($(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. 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.

Attention: 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.