限制複選框爲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>