Comment décocher la case avec javascript

Javascript est un langage de script généralement utilisé pour les effets spéciaux dynamiques et les interactions sur les pages Web. Une case à cocher est un élément de saisie utilisé dans les formulaires qui permet à l'utilisateur de sélectionner une ou plusieurs options. Dans certains cas, nous souhaitons que la case soit décochée. Dans ce cas, nous pouvons utiliser Javascript pour réaliser cette fonction.

Les situations courantes incluent :

1. Désactiver les cases à cocher lors du chargement de la page

Parfois, nous souhaitons que certaines cases soient décochées par défaut lors du chargement de la page. Vous pouvez ajouter l'attribut désactivé à ces cases afin qu'elles ne puissent pas être sélectionnées.

Code HTML :

<input type="checkbox" name="checkbox1" value="1" disabled>
<input type="checkbox" name="checkbox2" value="2" disabled>
<input type="checkbox" name="checkbox3" value="3" disabled>

De cette façon, ces cases à cocher seront désactivées dès le début et ne pourront pas être cochées.

2. Jugement conditionnel pour désactiver la case à cocher

Parfois, nous devons juger s'il faut laisser une case décochée en fonction de la sélection de l'utilisateur. Ceci peut être réalisé en utilisant Javascript.

Code HTML :

<input type="checkbox" name="checkbox1" value="1" onchange="disableIfChecked(this)">

Lorsque la case à cocher change, l'événement onchange sera exécuté. Dans ce cas, nous pouvons déterminer s’il faut la décocher en fonction de l’état de la case à cocher.

Code Javascript :

function disableIfChecked(checkbox) {
   if (checkbox.checked) {
      checkbox.checked = false;
   }
}

L'instruction if dans ce code détermine si la case à cocher est cochée et, si c'est le cas, la définit à l'état non coché.

3. Cliquez sur un bouton pour désactiver les cases à cocher

Une autre situation courante est que nous souhaitons que certaines cases soient décochées après que l'utilisateur clique sur un bouton. Encore une fois, cela peut également être réalisé en utilisant Javascript.

Code HTML :

<input type="checkbox" name="checkbox1" value="1">
<input type="checkbox" name="checkbox2" value="2">
<input type="checkbox" name="checkbox3" value="3">
<button onclick="disableCheckboxes()">Disable Checkboxes</button>

Dans cet exemple, nous avons trois cases à cocher et un bouton. Lorsque vous cliquez sur le bouton, Javascript exécutera la fonction DisableCheckboxes() pour définir la case à cocher sur l'état non coché.

Code Javascript :

function disableCheckboxes() {
   var checkboxes = document.getElementsByTagName('input');
   for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == &#39;checkbox&#39;) {
         checkboxes[i].checked = false;
      }
   }
}

Dans ce code, nous obtenons d'abord tous les éléments d'entrée, puis déterminons si leur type est une case à cocher. Si tel est le cas, désactivez-le.

4. Désactivez les cases à cocher lors de la soumission du formulaire

Une autre situation est que nous souhaitons que certaines cases à cocher ne soient pas sélectionnables lorsque l'utilisateur soumet le formulaire. Encore une fois, cela peut également être réalisé en utilisant Javascript.

Code HTML :

<form onsubmit="disableCheckboxesOnSubmit()">
   <input type="checkbox" name="checkbox1" value="1">
   <input type="checkbox" name="checkbox2" value="2">
   <input type="checkbox" name="checkbox3" value="3">
   <input type="submit" value="Submit">
</form>

Dans cet exemple, nous avons ajouté un événement onsubmit à l'élément form, qui est une fonction qui est exécutée lorsque le formulaire est soumis. Ensuite, dans cette fonction, nous pouvons définir la case à cocher sur un état non coché pour éviter une mauvaise opération de l'utilisateur.

Code Javascript :

function disableCheckboxesOnSubmit() {
   var checkboxes = document.getElementsByTagName('input');
   for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == 'checkbox') {
         if (checkboxes[i].checked) {
            // 如果 checkbox 被选中，则禁用它
            checkboxes[i].disabled = true;
         }
      }
   }
}

Dans ce code, nous utilisons également la méthode d'obtention de tous les éléments d'entrée et de détermination de leur type. Mais cette fois, nous déterminons si la case est cochée et, si c'est le cas, la désactivons. De cette façon, l’utilisateur ne peut pas cocher à nouveau la case lors de la soumission du formulaire.

Ce qui précède explique comment utiliser Javascript pour désactiver la sélection d'une case à cocher. Il est important de noter que ces méthodes affecteront l’expérience utilisateur et doivent donc être utilisées avec prudence. Lorsque cela ne peut être évité, des invites appropriées doivent être données dans l'interface pour informer l'utilisateur que ces cases à cocher sont désactivées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!