set total number of checkbox in array

Question

i have check box array like this

  for($j=1;$j<=10;$j++)      
  <input type="checkbox" name="chkLimit[]" id="chkLimit_<?php echo $j;?>" value="<?php echo $j;?>" />

i got 10 check box

and i write the jquery code like this...

  $(document).ready(
 function (){
 setLimitSelection();
 }


);


   function setLimitSelection(){
 $('input[name="chkLimit[]"]').limitSelection(
  {
   // number of items to limit to
   limit: 4,
   // on error, do this
   onfailure: function (n){
    $("#idCheckboxMsg").html(
     "You can not select more than " + n + " items."
    );
    return false;
   },
   // on success, do this
   onsuccess: function (n){
    $("#idCheckboxMsg").html("");
    return false;
   }
  }
 );
 $('select[name="selLimit[]"]').limitSelection(10);
}

$("input.chkLimit").click(function() {
    var numSelected = $("input.chkLimit[]:checked").length;
 var numLeft = 10 - parseInt(numSelected);
 $("#statusBox").html("You have "+numSelected+" CD's selected.<br>You have "+numLeft+" selections left.");
});

what i want is: user can't select more than 4 check boxs

thanks

Answer 1

I haven't tested this, but it should get the job done for you:

$(function(){
    $("#myCheckboxes input[type='checkbox']").change(
        var checked = $("#myCheckboxes input[type='checkbox'][checked]").length;
        if(checked == 4){
            $("#myCheckboxes input[@type='checkbox']").not(":checked").attr('disabled',true);
        }else{
            $("#myCheckboxes input[@type='checkbox']").not(":checked").attr('disabled',false);
        }
    )
});

Every time the checked state of a checkbox changes, it looks at how many checkboxes are checked. If there are 4, it disables the unchecked boxes, otherwise it enables them. This assumes that they all live in a container called #myCheckboxes

Answer 2

Looks like @inkedmn had some syntax errors but the comment box just isn't adequate to elaborate. So, here's what I think he's trying to do:

$(function(){
    $("#myCheckboxes input[type='checkbox']").change(function() {
        var checked = $("#myCheckboxes input[type='checkbox']:checked").length;
        if(checked == 4){
            $("#myCheckboxes input[type='checkbox']")
                .attr('disabled',true)
                .filter(':not(:checked)')
                .attr('disabled',false);
        } else {
            $("#myCheckboxes input[type='checkbox']").attr('disabled',false);
        }
    )
});

That should get it done for you.