Comment désactiver des cases à cocher quand l'une est cochée ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-02-07 20:41:08

Question

bonjour, j'ai plusieurs checkbox auxquelles j'aimerais appliquer des fonctions pour que lorsque l'une est cochée, automatiquement les autres se bloquent de telle manière qu'on ne puisse plus les cocher.

Réponse

Avant tout, et pour rappel, il existe l'option type="radio" qui permet de construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur.

Si vous devez absolument utiliser des cases à cocher du type checkbox, voici une première solution en JavaScript. Cette solution implique que vous devez préfixer chaque balise <input type="checkbox"> avec un id et un nom.

Utilisez le même nom pour toutes les cases à cocher d'un même groupe.
Pour rappel tous les id doivent être différents, une page HTML ne doit jamais contenir deux id identiques.

Voici donc un exemple avec deux groupes de trois cases à cocher chacun :

<input type="checkbox" name="groupe_1" id="groupe_1_case_1" onClick="doChange(this)">Groupe 1 Case 1
<br>
<input type="checkbox" name="groupe_1" id="groupe_1_case_2" onClick="doChange(this)">Groupe 1 Case 2
<br>
<input type="checkbox" name="groupe_1" id="groupe_1_case_3" onClick="doChange(this)">Groupe 1 Case 3
<br>
<input type="checkbox" name="groupe_2" id="groupe_2_case_1" onClick="doChange(this)">Groupe 2 Case 1
<br>
<input type="checkbox" name="groupe_2" id="groupe_2_case_2" onClick="doChange(this)">Groupe 2 Case 2
<br>
<input type="checkbox" name="groupe_2" id="groupe_2_case_3" onClick="doChange(this)">Groupe 2 Case 3

Voici le code JavaScript correspondant à la fonction doChange() qui est positionnée sur l'évènement onClick des cases à cocher.

<script>
function doChange(cases)
{
    var nom = document.getElementsByName(cases.name);
    var checkbox = document.getElementById(cases.id);
    
    if (checkbox.disabled == true)
    {
    	return;
    }   
    else if (checkbox.checked)
    {
      for(var i=0; i < nom.length; i++)
      {

          if(!nom[i].checked)
          {
              nom[i].disabled = true;
          }
          else
          {
              nom[i].disabled = false;
          }
      } 
    }
    else 
    {
      for(var i=0; i < nom.length; i++)
      {
        nom[i].disabled = false;
      } 
    }    
}
</script>

De cette manière à chaque fois qu'une case à cocher d'un groupe est cochée, toutes les autres cases à cocher du même groupe sont désactivées. Lorsqu'une case cochée est décochée, toutes les autres cases à cocher du même groupe sont réactivées.

Démo sur le Bac à Codes.

Réponse

Si sur votre page HTML, toutes les cases à cocher sont concernées par la règle à appliquer, à savoir lorsque qu'une case est cochée, toutes les autres doivent être désactivées, sans exception, vous n'avez pas besoin de préfixer avec des id et d'utiliser la propriété name, et vous pouvez par exemple utiliser jQuery.

<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
</head>
<body>
<input type="checkbox"> Case 1
<br>
<input type="checkbox"> Case 2
<br>
<input type="checkbox"> Case 3

<script>
$('input:checkbox').click(function()
{
	var $cases = $('input:checkbox');
	
        if($(this).is(':checked'))
        {
           $cases.not(this).prop('disabled',true);
        }
        else
        {
           $cases.prop('disabled',false);
        }
})
</script>
</body>
</html>