javascript - 如何使用 jquery 检查特定数量的复选框并禁用剩余？

Question

在具有多个复选框(超过 12 个)的 .vipGuests 的特定 DIV 中，我想选择最多 12 个复选框。 一旦用户选择第 12 个复选框，其余复选框将被禁用。

我下面提到的代码只计算选中的复选框的数量。我如何实现该功能，以便用户可以选中最多 12 个复选框，其余的将被禁用。

$('.vipGuests input[type=checkbox]').on('change', function () {             
    var totalGuest = 0;
    $('.vipGuests input[type=checkbox]:checked').each(function () {
        totalGuest++;
    });
});

注意:主要的是，在检查/取消选中期间，当检查的复选框为11时，所有复选框都将处于事件状态。只有当计数器等于 12 时，才会禁用唯一未选中的复选框。

Answer 1

您可以使用 :not()选择器并选择未选中的复选框并禁用它们。此外，您不需要使用 .each() 来获取复选框的数量。请改用 length 属性。

$(".vipGuests :checkbox").on("change", function(){
    if ($(".vipGuests :checkbox:checked").length >= 3)
        $(".vipGuests :checkbox:not(:checked)").prop("disabled", true);
    else
        $(".vipGuests :checkbox:not(:checked)").prop("disabled", false);
});

$(".vipGuests :checkbox").on("change", function(){
    $(".vipGuests :checkbox:not(:checked)").prop("disabled", $(".vipGuests :checkbox:checked").length >= 3);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vipGuests">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>