par

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.

2 Réponses

+1 validé
par

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.

+1 validé
par

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>

Tendances sur le Web

Lecture Recommandée

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...