J'ai deux cases à cocher.

<label><input type="checkbox" name="cb1" class="chbR" /> % Retain</label>
<label><input type="checkbox" name="cb2" class="chbP" /> % Passing</label>

Un seul des deux peut être sélectionné en même temps

Si cb1 est sélectionné et que l'utilisateur clique sur cb1, cb1 doit être désélectionné Si cb2 est sélectionné et que l'utilisateur clique sur cb2, cb2 doit être désélectionné

Si cb1 est sélectionné et que l'utilisateur clique sur cb2, cb1 doit être désinstallé Si cb2 est sélectionné et que l'utilisateur clique sur cb1, cb2 doit être désinstallé http://jsfiddle.net/5o47bgzc/

Essayé avec l'événement click and change mais c'est comme si un troisième état était nécessaire

Lorsque l'événement se produit, l'état précédent n'est pas disponible

Une autre façon de faire ?

0
robert trudel 15 mars 2019 à 22:56

2 réponses

Meilleure réponse

Vous pouvez le faire en faisant en sorte que la modification de chaque case à cocher désactive l'état coché de l'autre :

$(".chbR").change(function() {
  $(".chbP").prop('checked', false);
});

$(".chbP").change(function() {
  $(".chbR").prop('checked', false);
});
label {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="cb1" class="chbR" /> % Retain</label>
<label><input type="checkbox" name="cb2" class="chbP" /> % Passing</label>
1
MrGeek 15 mars 2019 à 20:00

Cette logique utilise donc des boutons radio et garde une trace de la valeur sélectionnée. Si vous cliquez sur la radio déjà sélectionnée, elle la désélectionne.

$(function(){
  var lastValue = '';
  
  $('.chb')
    .on('click', function(e){
      if (lastValue === e.target.value) {
        e.target.checked = false;
        lastValue = '';
      }
    })
    .on('change', function(e){
      lastValue = e.target.value;
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="cb" value="retain" class="chb chbR" /> % Retain</label>
<label><input type="radio" name="cb" value="passing" class="chb chbP" /> % Passing</label>
1
Taplar 15 mars 2019 à 20:05