Limite importo casella di controllo

Ho 20 caselle di controllo. Devo disabilitare 16 caselle di controllo, se sono selezionate 4 caselle di controllo.

Ho provato questo begann con questo codice jquery

$("input[type=checkbox][name=cate]:checked").each( function() { } ); 

Quello di cui ho bisogno è che se un utente seleziona 4 caselle di controllo, tutte le altre caselle di controllo dovrebbero essere disabilitate.

 $("input[type=checkbox][name=cate]").click(function() { var bol = $("input[type=checkbox][name=cate]:checked").length >= 4; $("input[type=checkbox][name=cate]").not(":checked").attr("disabled",bol); }); 

dimostrazione

Fornire un elemento genitore con un id di limit_checkbox contribuirà ad accelerare la selezione, la memorizzazione nella cache della query riduce la quantità di interazione DOM che è lenta.

Usato “change” invece di fare clic altrimenti il ​​codice potrebbe essere aggirato usando la tastiera, usando anche live invece di bind che è molto più veloce.

 // Cache jQuery selection var $checkboxes_to_limit = $("#limit_checkbox").find("input:checkbox[name=cate]"); $checkboxes_to_limit.live("change", function() { if($checkboxes_to_limit.filter(":checked").length >= 4) { $checkboxes_to_limit.not(":checked").attr("disabled","disabled"); } else { $checkboxes_to_limit.removeAttr("disabled"); } }); 

Ecco un esempio funzionante. Potrebbe essere utile per alcune persone 😉

 $.fn.limit = function(n) { var self = this; this.click(function(){ (self.filter(":checked").length==n)? self.not(":checked").attr("disabled",true).addClass("alt"): self.not(":checked").attr("disabled",false).removeClass("alt"); }); } $("input:checkbox").limit(3); } 

Ho trovato una soluzione più flessibile che consente di variare il limite per diversi set di checkbox.

 // Assign a class of limit_checkbox to the containing DIV and // set a data-limit attribute with your limit. $(".limit_checkbox").on("change", function() { var limit = $(this).attr('data-limit'), checkboxes = $(this).find("input:checkbox"), valid = checkboxes.filter(":checked").length >= limit; checkboxes.not(":checked").attr("disabled", valid); }); 

L’unico problema che ho riscontrato è che se la validazione fallisce e restituisce la pagina con l’input, l’utente selezionerà una casella in più prima di disabilitare il resto. Il modo in cui ho risolto questo era contare quante ne erano state controllate e distriggersre il resto sul server prima di inviare la pagina con l’input back.

spero che aiuti Cheers!

Ciò non disabilita le caselle di controllo rimanenti, ma impedisce di selezionarne altre. Condividerò comunque, eccolo qui:

aspx

  

.js

 $(document).ready(function () { LimitCheckboxes('input[name*=chkList]', 3); } function LimitCheckboxes(control, max) { $(control).live('click', function () { //Count the Total Selection in CheckBoxList var totCount = 1; $(this).siblings().each(function () { if ($(this).attr("checked")) { totCount++; } }); //if number of selected item is greater than the max, dont select. if (totCount > max) { return false; } return true; }); } 

PS: assicurati di utilizzare RepeatLayout = “Flusso” per eliminare il fastidioso formato di tabella.

La mia soluzione:

 // Function to check and disable checkbox function limit_checked( element, size ) { var bol = $( element + ':checked').length >= size; $(element).not(':checked').attr('disabled',bol); } // List of checkbox groups to check + number of checked alowed var check_elements = [ { id: '.group1 input[type=checkbox]', size: 2 }, { id: '.group2 input[type=checkbox]', size: 3 }, ]; // Run function for each group in list $(check_elements).each( function(index, element) { // Limit checked on window load $(window).load( function() { limit_checked( element.id, element.size ); }) // Limit checked on click $(element.id).click(function() { limit_checked( element.id, element.size ); }); });