jQuery: Disable Submit Button if no Checkbox is selected
Tip by Computer Expert | 2014-03-18 at 19:54
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.
About the Author
The author has not added a profile short description yet.
Show Profile
Related Topics
HTML Form: Redirection depending on Radiobutton or Checkbox State
Tutorial | 0 Comments
HTML: Preassign HTML Form with Data
Tutorial | 0 Comments
PHP: Submit form with many checkboxes to script comfortably
Tip | 2 Comments
jQuery: Submit complete form and receive content with Ajax
Tutorial | 0 Comments
jQuery: Show or hide DIV-container depending on checkbox is checked
Tutorial | 0 Comments
JavaScript: Catch Submit of Form
Tutorial | 0 Comments
jQuery: Toggle Checkboxes (Select/Unselect All)
Tip | 0 Comments
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.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
And if you only have one checkbox, it is even much more easier to implement:
In this.checked it is stored, whether the clicked checkbox is selected or not. Using !this.checked we can set our submit button to exactly the opposite.
2014-03-18 at 22:04
Thanks for this instruction of checkboxes.
2018-05-16 at 07:02
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