将复选框限制为 2，但移动选择而不是阻止它

Question

我希望允许客户从一组 4 个复选框中仅选择 2 个复选框，但如果他们选择第三个，则从已选择的 2 个中的一个中选择将移至第三个。

这个网站上有一个例子（大部分是手机屏幕尺寸） https://www.office-coffee.co.uk/coffee-machines-for-business/comparison/

到目前为止我有这个代码：

$(document).ready(function() {
  var theCheckboxes = $(".pricing-levels-2 input[type='checkbox']");
  theCheckboxes.click(function() {
    if (theCheckboxes.filter(":checked").length > 2)
      $(this).removeAttr("checked");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricing-levels-2">
  <p><strong>Which level would you like?</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>

Answer 1

您可以使用 DOM 遍历方法来定位复选框以使用 .prop(propertyName, value) 设置其 checked 属性。在示例中，我操作了第一个复选框属性

$(document).ready(function() {
  var theCheckboxes = $(".pricing-levels-2 input[type='checkbox']");
  theCheckboxes.change(function() {
    if (theCheckboxes.filter(":checked").length > 2) {
      theCheckboxes.filter(":checked").not(this).eq(0).prop('checked', false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricing-levels-2">
  <p><strong>Which level would you like?</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>

Answer 2

要删除第一个，您可以使用theCheckboxes.filter(":checked:first").removeAttr("checked");

例如：

$(document).ready(function() {
  var theCheckboxes = $(".pricing-levels-2 input[type='checkbox']");
  theCheckboxes.click(function() {
    if (theCheckboxes.filter(":checked").length > 2)
      theCheckboxes.filter(":checked:first").removeAttr("checked");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricing-levels-2">
  <p><strong>Which level would you like?</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>