Limit Number of Checkboxes Checked

Question

I have a form with several checkboxes. I have three categories of checkboxes in the form. I need to limit to a max of three checkboxes per category.

I used

Answer 1

This is a newbie code with javascript. It's like working...hardly... I call this function on each input. But there is surely a way to call this function one time. It's working but uncheking a random checkbox from thoses who call it.

   <input type="checkBox"  name="cat1" value="education" onClick="just2cat();">Education
    <input type="checkBox"  name="cat2" value="faith" onClick="just2cat();">Religions
    <input type="checkBox"  name="cat3" value="news" onClick="just2cat();">News



  function just2cat()
        {
            var allInp = document.getElementsByTagName('input');
            const MAX_CHECK_ = 2; /*How many checkbox could be checked*/
            var nbChk =0;
            for(var i= 0; i<allInp.length; i++)
            {
                if(allInp[i].type.toLowerCase()=='checkbox' && allInp[i].checked) /*OR
                if(allInp[i].type.toLowerCase()=='checkbox' && allInp[i].checked===true) */
                {
                    nbChk++;

                    if(nbChk > MAX_CHECK_) 
                    {
                        alert("At most 2 categories can be chosen");
                        allInp[i].checked=false; /* try to Unchek the current checkbox :'(  */
                    }

                }
            }
        }

Answer 2

just add a class to all the related check boxes, and just use the class selector when checking the checkboxes for a category. eg:

HTML

<label>Cat 1</label>
<input type='checkbox' class='cat1' />
<input type='checkbox' class='cat1' />
<input type='checkbox' class='cat1' />

<label>Cat 2</label>
<input type='checkbox' class='cat2' />
<input type='checkbox' class='cat2' />
<input type='checkbox' class='cat2' />
...

JS

jQuery(function(){
   var max = 3;

   var cat1_checkboxes = jQuery('input.cat1[type="checkbox"]');
   var cat2_checkboxes = jQuery('input.cat2[type="checkbox"]');
   var cat3_checkboxes = jQuery('input.cat3[type="checkbox"]');


   cat1_checkboxes.change(function(){
      var current = cat1_checkboxes.filter(':checked').length;
       checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
   });

   cat2_checkboxes.change(function(){
      var current = cat2_checkboxes.filter(':checked').length;
       checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
   });

   cat3_checkboxes.change(function(){
      var current = cat3_checkboxes.filter(':checked').length;
       checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
   });

});

Answer 3

Try this:

jQuery(function(){
   var max = 3;
   var categories = jQuery('label'); // use better selector for categories

   categories.each(function(){
       var checkboxes = $(this).find('input[type="checkbox"]');
       checkboxes.change(function(){
            var current = checkboxes.filter(':checked').length;
            checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
        });
   });
});

Answer 4

Try (if your markup matches the one in the fiddle)

jQuery(function(){
    var max = 3;
    var checkboxes = jQuery('input[type="checkbox"]');

    checkboxes.click(function(){
        var $this = $(this);
        var set = $this.add($this.prevUntil('label')).add($this.nextUntil(':not(:checkbox)'));
        var current = set.filter(':checked').length;
        return current <= max;
    });
});

Demo: Fiddle

Update:
Since you have a name for the checkboxes

jQuery(function(){
    var max = 3;
    var checkboxes = jQuery('input[type="checkbox"]');

    checkboxes.click(function(){
        var $this = $(this);
        var set = checkboxes.filter('[name="'+ this.name +'"]')
        var current = set.filter(':checked').length;
        return current <= max;
    });
});

Demo: Fiddle

Answer 5

jQUERY

$("input[name=chk]").change(function(){
    var max= 3;
    if( $("input[name=chk]:checked").length == max ){
        $("input[name=chk]").attr('disabled', 'disabled');
        $("input[name=chk]:checked").removeAttr('disabled');
    }else{
         $("input[name=chk]").removeAttr('disabled');
    }
});

HTML

<input type="checkbox" name"chk" value="A"/>A
<input type="checkbox" name"chk" value="B"/>B
<input type="checkbox" name"chk" value="C"/>C
<input type="checkbox" name"chk" value="D"/>D
<input type="checkbox" name"chk" value="E"/>E
<input type="checkbox" name"chk" value="F"/>F
<input type="checkbox" name"chk" value="F"/>G

FIDDLE EXAMPLE IS HERE