Question

We have checkboxes in two columns (they denote the same category, but different subscription)

We would like to limit the selection to 4. We have a jQuery code to disable the checkbox selection after the user selected 4.

But now we need to have the following logic:

• Allow the user to choose both values from the same rows (aka: subscribe to both subscriptions from the same category) and do not count in the 4 limit we have if they have chosen more from the same row.

So if you look in the following screencast, we would like to be able to select the first checkbox (1st row).

The code we used was:

$("input:checkbox").click(function() {

  var bol = $("input:checkbox:checked").length >= 4;     
  $("input:checkbox").not(":checked").attr("disabled",bol);

});

A jsFiddle has been created to reflect the current state of work:
http://jsfiddle.net/fFbLx/

Feel free to name the classes, inputs as you wish.

Answer 1

I think you would have to “categorise” them by the LI then. So count the LI’s with an checked box – disable all others if more than 4 active.

See: http://jsfiddle.net/fFbLx/4/ (maybe give the UL’s a class, so you can use the selector on that)

$("input:checkbox").click(function() {

  var counter = 0;
    $('li').each( function() {
        if($(this).find("input:checkbox:checked").length)
        {
            $(this).addClass('active');
            counter++;
        } else {
            $(this).removeClass('active');
        }
    });
  var bol = counter >= 4;     
  $('li').not('.active').find("input:checkbox").not(":checked").attr("disabled",bol);

});