Définir le bouton désactiver dans jquery

WBOY
Libérer: 2023-05-08 17:32:37
original
5999 Les gens l'ont consulté

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>
Copier après la connexion

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

$("#myButton").prop("disabled", true);
Copier après la connexion

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;
}
Copier après la connexion

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");
Copier après la connexion

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");
Copier après la connexion

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);
});
Copier après la connexion

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);
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal