Limite Case quantité

Fournir un élément parent avec un id de limit_checkbox aidera à accélérer la sélection, la mise en cache de la requête réduit la quantité D'interaction DOM qui est lente.

Utilisé "change" au lieu de click sinon le code pourrait être contourné en utilisant le clavier, en utilisant également live au lieu de bind qui est beaucoup plus rapide.

// 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");
    }
});

Voici un exemple de travail. Peut-être que ce serait utile pour certaines personnes ; -)

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

}

J'ai trouvé une solution plus flexible qui vous permet de varier la limite pour différents ensembles de cases à cocher.

// 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);
});

Le seul problème que j'ai trouvé était que si votre validation échoue et renvoie la page avec l'entrée, il permettra à l'utilisateur de sélectionner une case supplémentaire avant de désactiver le reste. La façon dont j'ai résolu cela était de compter combien ont été vérifiés et désactiver le reste sur le serveur avant d'envoyer la page avec l'entrée de retour.

J'espère que cela aide les acclamations!

Cela ne désactive pas les cases à cocher restantes, mais empêche de sélectionner plus. Je vais partager quand même, le voici:

.aspx

<asp:CheckBoxList id="chkList" runat="server" RepeatLayout="Flow" />

.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: assurez-vous d'utiliser le RepeatLayout="Flow" pour vous débarrasser du format de table ennuyeux.

Ma solution:

// 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 );
      });
    });