jquery définit la zone de saisie sur désactivée

Dans le développement front-end, il est souvent nécessaire de définir la zone de saisie sur un état désactivé pour empêcher les utilisateurs de mal fonctionner ou protéger les données sensibles. Les champs de saisie peuvent être facilement désactivés à l'aide de la bibliothèque jQuery.

Tout d'abord, nous devons sélectionner la zone de saisie qui doit être désactivée. Vous pouvez utiliser les sélecteurs jQuery pour sélectionner les zones de saisie qui doivent être désactivées. Les sélecteurs utilisent la syntaxe des sélecteurs CSS.

Par exemple, pour sélectionner la zone de saisie avec l'identifiant "inputBox", vous pouvez utiliser le code suivant :

$("#inputBox")

Ensuite, nous devons utiliser la méthode "prop" de jQuery pour définir l'état Désactivé de la zone de saisie. Cette méthode accepte deux paramètres, le premier paramètre est l'attribut à définir et le deuxième paramètre est la valeur de l'attribut. Dans ce cas, nous devons définir l'attribut "disabled" sur "true" pour désactiver la zone de saisie.

Le code complet est le suivant :

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

Ce code désactivera la zone de saisie avec l'identifiant "inputBox".

Si nous devons annuler l'état désactivé de la zone de saisie, nous pouvons utiliser le même code mais définir l'attribut "disabled" sur "false".

$("#inputBox").prop("disabled", false);

Dans certains cas, définir la zone de saisie sur un état désactivé peut ne pas être assez évident et vous devrez peut-être utiliser des styles CSS pour souligner l'état désactivé. Les styles suivants peuvent être utilisés pour souligner l'état désactivé :

.disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

Ces styles définissent la couleur d'arrière-plan sur gris, la couleur de premier plan sur gris foncé et définissent le curseur de la souris sur "non autorisé" pour représenter la zone de saisie Non disponible.

Pour utiliser ce style, nous devons ajouter la classe "disabled" à la zone de saisie :

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

Lors de la révocation de l'état désactivé, nous devons supprimer le "disabled" classe à partir de la zone de saisie ：

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

En développement, définir les zones de saisie sur un état désactivé est une tâche courante. En utilisant jQuery, nous pouvons facilement y parvenir et ajouter un style facilement identifiable à l'état désactivé.

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!