Définir le bouton désactiver dans jquery

Dans le développement Web, nous devons souvent implémenter certaines fonctions interactives via JavaScript, et la désactivation des boutons est une exigence courante. En tant que bibliothèque JavaScript efficace, jQuery fournit une API pratique pour implémenter le contrôle de désactivation des boutons. Cet article explique comment utiliser jQuery pour désactiver le bouton.

1. Désactiver les attributs du bouton

En HTML, le bouton peut être désactivé en définissant l'attribut désactivé de l'élément bouton. Par exemple, nous pouvons définir le code HTML suivant pour créer un bouton :

<button id="myButton">点击我</button>

Pour désactiver le bouton, définissez simplement l'attribut désactivé :

$("#myButton").prop("disabled", true);

Dans le code ci-dessus, nous utilisez la fonction prop() de jQuery, qui peut définir ou obtenir la valeur d'attribut d'un élément. Ici, nous définissons l'attribut désactivé du bouton sur true, ce qui désactive le bouton.

2. Désactiver l'état du bouton

En plus de définir les propriétés du bouton, nous pouvons également contrôler directement l'état du bouton pour obtenir la désactivation. Dans jQuery, vous pouvez utiliser les fonctions addClass() et removeClass() pour ajouter ou supprimer des noms de classe, modifiant ainsi l'état de l'élément. Par exemple, nous pouvons d'abord définir un style désactivé :

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

Dans le style ci-dessus, nous définissons la transparence de l'élément sur 0,5, définissons le pointeur de la souris sur non autorisé et désactivons les événements de souris de l'élément, obtient ainsi l'effet de désactiver le bouton.

Ensuite, en JavaScript, nous pouvons ajouter le style via la fonction addClass() pour désactiver le bouton :

$("#myButton").addClass("disabled");

Dans le code ci-dessus, nous utilisons la fonction addClass() de jQuery , ajoute le style "désactivé" au bouton. De cette façon, le bouton est désactivé.

Si vous devez activer le bouton, utilisez simplement la fonction removeClass() pour supprimer le style "désactivé" :

$("#myButton").removeClass("disabled");

De cette façon, le bouton est activé.

3. Désactivez tous les boutons

Parfois, nous devons désactiver ou activer tous les boutons de la page Web en même temps. Dans ce cas, nous pouvons utiliser la fonction each() de jQuery. pour parcourir tous les éléments Button qui effectuent l’action correspondante. Par exemple, pour désactiver tous les boutons, vous pouvez écrire le code JS suivant :

$("button").each(function() {
  $(this).prop("disabled", true);
});

Dans le code ci-dessus, nous utilisons la fonction each() de jQuery pour parcourir tous les éléments du bouton et définir leur attribut désactivé sur true, désactivant tous les boutons.

Pour activer tous les boutons, définissez simplement l'attribut désactivé sur false :

$("button").each(function() {
  $(this).prop("disabled", false);
});

De cette façon, tous les boutons sont activés.

Résumé

En développement web, désactiver les boutons de contrôle est une opération courante. L'effet de désactivation d'un bouton peut être facilement obtenu à l'aide de jQuery, que ce soit en définissant les propriétés de l'élément bouton ou en contrôlant le style du bouton. Il convient de noter que la désactivation des boutons doit être conditionnelle et ne peut pas être abusée, sinon cela affectera l'expérience utilisateur.

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!