Ограничить сумму флажка

Question

У меня 20 флажков. Мне нужно отключить 16 флажков, если выбраны 4 флажка.

Я попробовал это с этим кодом jquery

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

    function()
    {
    }

);

Что мне нужно, если пользователь выбирает 4 флажка, то все остальные флажки должны быть отключены.

Answer 1

$("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);

});

демо

Answer 2

Предоставление родительского элемента с идентификатором limit_checkbox поможет ускорить выделение, кэширование запроса уменьшает количество взаимодействий DOM, которое является медленным.

Используется «изменить» вместо клика, иначе код можно обойти с помощью клавиатуры, также используя live вместо связывания, что намного быстрее.

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

Answer 3

Вот рабочий пример. Может быть, это будет полезно для некоторых людей; -)

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

}

Answer 4

Я нашел более гибкое решение, которое позволяет варьировать лимит для разных наборов флажков.

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

Единственная проблема, которую я обнаружил, заключалась в том, что если ваша проверка завершится неудачно и вернет страницу с вводом, она позволит пользователю выбрать один дополнительный блок перед отключением остальных. Я решил это, посчитав, сколько было проверено, и отключив остальное на сервере перед отправкой страницы с вводом обратно.

надеюсь, что это помогает Ура!

Answer 5

Мое решение:

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

Answer 6

Это не отключает оставшиеся флажки, но мешает выбрать больше. Я все равно поделюсь, вот оно:

.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: убедитесь, что вы используете RepeatLayout = "Flow", чтобы избавиться от надоедливого формата таблицы.