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

Question

我想允许客户端只选择2复选框形式的一组4，但如果他们选择第三个从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>