Limiter la case à cocher à 2, mais déplacer la sélection au lieu de la bloquer

Question

Je voudrais permettre au client de sélectionner seulement 2 case à cocher former un groupe de 4, mais s'il sélectionne le troisième le sélectionner parmi l'un des 2 déjà sélectionnés va passer à ce troisième.

Il est un exemple sur ce site (le plus en taille de l'écran mobile) https://www.office-coffee.co.uk/coffee-machines-for-business/comparison/

J'ai ce code à ce jour:

$(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

Vous pouvez utiliser DOM traversal méthode pour cibler une case à cocher pour définir sa propriété checked en utilisant .prop(propertyName, value). Ici, dans l'exemple que j'ai manipuler la première propriété de cases à cocher

$(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

Pour supprimer la première, vous pouvez utiliser theCheckboxes.filter(":checked:first").removeAttr("checked");

Par exemple:

$(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>