views:

259

answers:

4

I have between 1-three checkboxes and by default they are all disabled. In order for the submit button to be active ove checkbox minumum must be selected. Can someone help me with a jquery snippet to achieve this? My markup looks like this and the site used jquery 1.42. Please and thankyou!

<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>
+1  A: 

Assuming the submit button is disabled to begin with (tested):

$(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);
    });
});
karim79
This worked fine, but I think if I have the button disabled from the start there may be useability issues... thoughts?
Jamie
If you want the button to work if there is no Javascript, then use jQuery to disabled it rather than using `disabled="disabled"` in the markup. I'll edit.
karim79
I ended up using this because it was shorter, but I think that aSeptic has more room to add additional hooks. I can muddle with jquery (barely) once the base funtions are laid out for me. All you guys are awesome and I had no idea I had to rate the answers, not good because I am not an expert enough to judge the finer points on between the two. Both karim79 and aSeptik had the best answers here and both "just worked" without having to disable anything in the mark-up.
Jamie
A: 

Try this:

$(function(){
  if ($('input[type="checkbox"]:checked').length > 0)
  {
       // submit the form now
  }
});
Sarfraz
Sweet! Thanks guys! Both worked :)
Jamie
+1  A: 

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);
    });
});
Mike Thomsen
Thanks Mike! I like this because I don't have to pre-disable the input.
Jamie
+3  A: 

Another way with disabled form button if nothing checked!

$(function() { 
    $('#add').attr('disabled','disabled');
    $('#pform input:checkbox').bind('click',function() {
        if($(this).is(':checked')) {
         $('#add').removeAttr('disabled');
        } else {
         $('#add').attr('disabled','disabled');
        }
   });
});​
aSeptik
This worked the best!
Jamie
nice to see you got it! pls, can you check the best answer for sake!? ;-)
aSeptik
LOL Sorry I am new here :P
Jamie
no problem Jamie!
aSeptik