Limit controllato casella in una forma

Question

Ho un modulo HTML con una serie di caselle, come rendere l'utente può controllare solo un numero fisso di loro

Answer 1

Questo esempio conta il numero di ingressi controllati dopo ogni sia selezionata e confrontare con il numero massimo consentito. Se viene superato il limite massimo, le caselle di controllo rimanenti sono disabilitate.

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

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

Ecco un esempio di lavoro - http://jsfiddle.net/jaredhoyt/Ghtbu/1/

Answer 2

Questo associa ad ogni casella un po 'di logica che controlla per vedere quante caselle di controllo sono selezionate nel modulo corrente. Se quel numero è uguale a 2, disabilitiamo tutte le altre caselle.

$("form").on("click", ":checkbox", function(event){ 
    $(":checkbox:not(:checked)", this.form).prop("disabled", function(){ 
    return $(this.form).find(":checkbox:checked").length == 2; 
    }); 
}); 

Questo funziona su una base per modulo, nel senso che è possibile avere più moduli che non tocchino gli input reciproci. Nella demo qui sotto espongo tre moduli, che contengono tre caselle di controllo. La restrizione di 2 caselle di controllo è limitata alle rispettive forme.

Dimostrazione: http://jsbin.com/epanex/4/edit