Question

I have several groups of checkboxes. Each group is contained in a div which is inside a fieldset.

The div has the class chk_div applied to it. I want to be able to limit the number of checkboxes the user can select to 3. I have a function which does this and it works if I give each checkbox a unique ID and refer to it.

However I would like to be able to do it via the chk_div class. So I can have as many groups of checkboxes as I want and only have to do the jQuery once.

Here is the code that works with a unique id for each checkbox. – the container will be a div id.

function CheckboxCount(container,maximum)
{//Counts all the checked checkboxes in the given container and once the maximum number of boxes are checked it disables all the rest

    var Checked = ($(container +' :checkbox:checked').length); //Get the number of checkboxes in this container that are checked

    //If the maximum number of checkboxes in the given container have been checked we disable the unchecked ones until the number of checked is lower than max
    if (Checked >= maximum){$(container +' :checkbox:not(:checked)').attr("disabled",true);} //Disable all non checked check boxes
    else{$(container +' :checkbox').attr("disabled",false);} //Enable all checkboxes
}

This function is triggered by code such as

$('#group1').click(function(){CheckboxCount('#group1',3);});
$('#group2').click(function(){CheckboxCount('#group2',3);});

Where group1, group2 are the id of the divs that contain the checkboxes.

What I want is something more like this

function test(container,maximum)
{
    $(container +' :checkbox').click(function(){

    var Checked = ($(container+' :checkbox:checked').length);

    if (Checked >= maximum){$(container +' :checkbox:not(:checked)').prop("disabled",true);} 
    else{$(container +' :checkbox').prop("disabled",false);} //Enable all checkboxes}

    });
}

Where the container is a class, and as you can see the .click event handler goes inside the function. Only problem with this is that it applies to all groups no matter which group the checkbox belongs to.

So if I click three checkboxes in group one, it also disables those in group 2

Here’s the jsFiddle so you can see what I mean. – http://jsfiddle.net/jSgp9/

Answer 1

I’d simplify it to this jsFiddle example.

$('.chk_div input').click(function() {
    if ($(this).parents('.chk_div').find('input:checked').length >= 3) {
        $(this).parents('.chk_div').find(':checkbox:not(:checked)').prop("disabled", true);
    }
    else {
        $(this).parents('.chk_div').find(':checkbox').prop("disabled", false);
    }
});​