Three checkboxes, you need to choose to enable the submit button, do you need jQuery?

Question

I have 1 to three checkboxes, and by default they are all disabled. In order for the submit button to be active, the minimum amount must be selected. Can someone help me with a jquery snippet to achieve this? My markup looks like this and the site uses jquery 1.42. Please, thank you!

<form action="/cart/add" method="post" id="pform"> <h3 class="goudy">Make your selection:</h3> <ul id="variants"> <li> <input type="checkbox" name="id[]" value="39601622" id="radio_39601622" style="vertical-align: middle;" class="required" /> <label for="radio_39601622[]">$38.00 - Original Antique Photo</label> </li> <li> <input type="checkbox" name="id[]" value="39601632" id="radio_39601632" style="vertical-align: middle;" class="required" /> <label for="radio_39601632[]">$8.99 - SCAN</label> </li> <li> <input type="checkbox" name="id" value="39777962" id="radio_39777962" style="vertical-align: middle;" class="required" /> <label for="radio_39777962">$2.99 - Rigid Sleeve</label> </li> </ul> <div class="buttons clearfix"> <input type="image" src="../images/add-to-cart.png" name="add" value="Add to Cart" id="add" class="send-to-cart" /> </div> </form> 

Answer 1

Another way to disable the form button if nothing is verified!

 $(function() { $('#add').attr('disabled','disabled'); $('#pform input:checkbox').bind('click',function() { if($(this).is(':checked')) { $('#add').removeAttr('disabled'); } else { $('#add').attr('disabled','disabled'); } }); });​ 

Answer 2

Assuming the submit button is disabled to start (verified):

 $(document).ready(function() { // disable submit once the DOM is ready $("input.send-to-cart").attr("disabled", "disabled"); $("input.required:checkbox").click(function() { $("input.send-to-cart").attr("disabled", !$("input.required:checkbox:checked").length); }); }); 

Answer 3

Another way:

 pform = null; numberSelected = 0; $(function(){ pform = $("#pform"); $("input[type=checkbox]", pform).click({ if ($(this).is(":selected")) numberSelected++; else numberSelected--; if (numberSelected > 0) $('#add').removeAttr('disabled'); else $('#add').attr('disabled', true); }); }); 

Answer 4

Try the following:

 $(function(){ if ($('input[type="checkbox"]:checked').length > 0) { // submit the form now } }); 

Answer 5

I needed the same functionality, but after reading the aSeptik solution, I was suspicious, as it seems to turn on the button at any time when the checkbox is checked, and disabled the button at any time when the checkbox is not checked. My reading of the code showed that the solution seems to work as long as you only test it by checking and unchecking one checkbox - try checking one checkbox, then a second, and then uncheck one of them leaving only one checkbox - you will be disabled your button, even if one of your checkboxes is checked. I tested and confirmed that this is so.