Evitar marcar la casilla de verificación después de la enésima selección (permitir más de la misma categoría)

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).

enter image description here

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.

preguntado el 08 de noviembre de 11 a las 08:11

3 Respuestas

If you wrap your checkboxes in an element you can then use the jquery has selector filter to check how many have selected checkboxes:

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

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

});

respondido 08 nov., 11:13

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.

Ver: 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);

});

respondido 08 nov., 11:13

Prueba esta http://jsfiddle.net/fFbLx/2/

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

     $(this).parent().find("input:checkbox:first").toggleClass("active");
     var bol = $("input:checkbox:checked").length >= 4;     
     $("input:checkbox").not(":checked,.active").attr("disabled",bol);

 });

respondido 08 nov., 11:13

That doesn't work. If you check all 6 boxes (3 x 2) in the first category, you can't select a fourth row. - njr101

@njreed.myopenid.com I think i misunderstood the question. - sathis

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.