67个动态复选框，4个被选中后如何禁用所有复选框？

Question

我有 67 个复选框，我只想让用户从这 67 个中选择 4 个。我现在的问题是：我不知道如何收听复选框，然后查看它们是否已被选中 4 个。

<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" id="catTable">
<tbody style="width: 80%;">
    <tr style="width: 50%;">
        <?php
        $countCat = ceil(count($categories) / 11);
        $i = 0;
        foreach ($categories as $key => $value) {

            ?>

            <?php if ($i % $countCat == 0) { ?></tr><tr><?php } ?>

            <td class="mdl-data-table__cell--non-numeric">
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="<?php print $value['catID']; ?>">
                    <input type="checkbox" id="<?php print $value['catID']; ?>" class="mdl-checkbox__input">
                    <span class="mdl-checkbox__label"><?php print $value['categoryNames']; ?></span>
                </label>
            </td>


            <?php
            ++$i;
        }

        ?>
    </tr>
</tbody>
</table>

我尝试过的：（JQuery）

   var checkboxes = ''; // Not sure how to get the random 67 that have been selected.
if (checkboxes == 4) {
    $('#catTable').html('');
    $('#catTable').html(''); // create new table with the selected 4
}

是否可以使用 Jquery 来监听复选框，一旦选择了 4 就删除表并保留选择的 4。如果用户想要删除或添加不同的类别，那么创建一个删除或添加按钮来恢复类别表？

提前致谢

Answer 1

这段代码怎么样：

var limit = 4;
$('input.mdl-checkbox__input').on('change', function(evt) {
  if ($('input.mdl-checkbox__input:checked').length > limit) {
    this.checked = false;
  }
});

我认为这段代码的循环会更短。

Answer 2

下面的代码可以按照您的意愿行事，检查任何动态创建的复选框上的更改事件。它只作用于包装在具有.checkbox-group 类且属性为checkbox-limit 的元素中的复选框。这样，代码可以应用于具有不同限制的单个页面上的多个复选框列表，但除非指定了限制，否则不会触发。

只有选中的复选框在达到限制后仍处于启用状态（因此您可以取消选择它们并根据需要选择另一个）。

我为每个组添加了一个按钮，演示如何收集归因于给定选定复选框的值。

比其他一些答案更复杂...所以它可能有点过分，但也更通用/更强大。

希望对你有帮助。

---

演示

// Add change event trigger dynamically
$(document).on('change', '.checkbox-group[checkbox-limit] input[type="checkbox"]', function() {

  // Get limit from wrapper attribute
  var lim = $(this).closest(".checkbox-group").attr("checkbox-limit");

  // Get current number of selected checkboxes within this wrapper
  // You could change .find() for .children() to prevent it checking through the entire tree within the wrapper.
  var selCount = $(this).closest(".checkbox-group").find("input[type='checkbox']:checked").length

  // Check number of checked checkboxe against limit
  if (selCount == lim) {

    // Disable unchecked checkboxes (so user can still uncheck selected checkboxes)
    $(this).closest(".checkbox-group").find("input[type='checkbox']:not(:checked)").attr("disabled", true);

  } else {

    // Enable checkboxes if a checkbox is unchecked 
    $(this).closest(".checkbox-group").find("input[type='checkbox']:not(:checked)").removeAttr("disabled");

  }

});


// Add click event to gather values button
$(".gatherValues").click(function() {

  // Setup array to save values to
  var selValues = [];

  // Cycle through all checked checkboxes within that group
  $(this).closest(".checkbox-group").find("input[type='checkbox']:checked").each(function() {

    // Add value to array
    selValues.push($(this).attr("value"));

  });

  // Print to console
  console.log(selValues);

})

.checkbox-group {
  border-left: 5px solid grey;
  border-bottom: 1px dashed grey;
  padding: 10px 10px 10px 20px;
  margin-bottom: 20px;
}

button {
  margin: 20px 00px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="checkbox-group" checkbox-limit="4">

  <p>Limit of 4 selection for this group.
  </p>

  <input type="checkbox" value="A">A<br>
  <input type="checkbox" value="B">B<br>
  <input type="checkbox" value="C">C<br>
  <input type="checkbox" value="D">D<br>
  <input type="checkbox" value="E">E<br>
  <input type="checkbox" value="F">F<br>

  <button class="gatherValues">Compile Values</button>

</div>

<div class="checkbox-group">

  <p>No limit for this group, check does not fire as the .checkbox-group wrapper does not have a checkbox-limit attribute.</p>

  <input type="checkbox" value="1">1<br>
  <input type="checkbox" value="2">2<br>
  <input type="checkbox" value="3">3<br>
  <input type="checkbox" value="4">4<br>

  <button class="gatherValues">Compile Values</button>


</div>

<div class="checkbox-group" checkbox-limit="1">

  <p>Limit of 1 selection for this group.
  </p>

  <input type="checkbox" value="Option 1">Option 1<br>
  <input type="checkbox" value="Option 2">Option 2<br>
  <input type="checkbox" value="Option 3">Option 3<br>
  <input type="checkbox" value="Option 4">Option 4<br>

  <button class="gatherValues">Compile Values</button>

</div>

Answer 3

这将计算选中复选框的数量：

var selected_checkbox = 0;

//listen for checkbox change event, then count number of selected. put this inside document ready.
$('input[type=checkbox]').change(function(){ 
   $('input[type=checkbox]').each(function () {
      if($(this).is(":checked")){
         selected_checkbox ++;
      }

      if selected_checkbox == 4 then
          //hide the selection box here

          return false; //exit the checkbox loop
      }
   });
});

Answer 4

我会说保留一个全局变量，每次发生复选框事件时都会增加该变量。然后在全局变量大小为 4 时禁用默认的 a 操作。

请记住，用户可能会取消选中已选中的框，因此您应该处理此类情况，以便全局变量不会在此类事件中增加。

全局变量很讨厌，但这应该可以让你抢先一步