演示

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

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

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 3

下面的代码按照您的意愿运行，检查任何动态创建的复选框上的更改事件。它仅对包装在元素为.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 4

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

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

全局变量令人讨厌，但这应该可以让您先行一步

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

4 个答案:

演示