javascript - 复选框选择

Question

将复选框限制为一定数量的示例是 here .

var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
  if ($(this).siblings(':checked').length >= limit) {
    this.checked = false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricing-levels-3">
  <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>

但它允许用户从所有复选框中选择任意三个。如何限制用户选择连续三个而不是随机三个复选框？例如，如果用户选择的第一个复选框为级别 4，则用户只能选择接下来的两个 (5,6) 或前两个 (3,2) 复选框，或者前一个 (3) 和下一个 (5)复选框。

谢谢。

Answer 1

您必须扩展您的 change 事件监听器回调，以检查(当检查其他项时)这些检查项之一是否是当前更改项的上一个或下一个同级项。如果是这样，那就没问题了。

此外，取消选中时，如果是中间的，则不应该这样做。 (否则这会产生间隙。)

是时候看一些工作示例了!

var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
  let $this = $(this);
  
  if (
    !$this.prop('checked') &&
    $this.prevAll('input').first().prop('checked') &&
    $this.nextAll('input').first().prop('checked')
  ) {
    // Don't uncheck if both neighbours are checked (would create a gap)
    $this.prop('checked', true);
  } else if (
    $this.siblings(':checked').length >= limit ||
    (
      $this.siblings(':checked').length > 0 &&
      !$this.prevAll('input').first().prop('checked') &&
      !$this.nextAll('input').first().prop('checked')
    )
  ) {
    // Don't check if limit is reached
    // or
    // none of the neighbours are checked but others are
    $this.prop('checked', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricing-levels-3">
  <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>