agrupando casillas de verificación y permite verificar un máximo de tres en cada grupo

Question

Me gustaría tener una aplicación donde un usuario ingrese datos para individuos arbitrarios. cada individuo tendrá una opción de un máximo de tres de seis opciones. Quiero ayuda sobre cómo forzar un máximo de tres opciones usando jquery en cualquier indivual.

aquí es un código de ejemplo

<div id="subscriber_1"> 
    <input type=checkbox name=national> 
    <input type=checkbox name=international> 
    <input type=checkbox name=business> 
    <input type=checkbox name=entertainment> 
    <input type=checkbox name=religion> 
    <input type=checkbox name=sports> 
</div> 

los suscriptores pueden correr hasta 20, como subscriber_1, subscriber_2, ... subscriber_20. Estaré agradecido por su ayuda.

Answer 1

Usted debe agregar una clase a su divs de abonados, para que sea más fácil de asociar controladores de eventos:

<div id="subscriber_1" class="subscriber">...</div> 
<div id="subscriber_2" class="subscriber">...</div> 

Y utilizar este jQuery:

$('.subscriber :checkbox').change(function() { 
    var $cs = $(this).closest('.subscriber').find(':checkbox:checked'); 
    if ($cs.length > 3) { 
     this.checked = false; 
    } 
}); 

jsFiddle Demo

Explicación : En el evento de cambio de estas casillas de verificación, buscamos el padre más cercano que tenga la clase .subscriber. Obtenemos las casillas marcadas dentro de este div. Si hay más de 3 (el que está marcado también cuenta), desmarcamos el actual.

---

Si luego no quiere añadir clases, puede utilizar este selector en su lugar:

$('[id^="subscriber_"] :checkbox')... 

Esto se llama el Attribute Starts With Selector.