recherche

Maison >interface Web >Questions et réponses frontales >Comment définir un champ pour qu'il ne soit pas modifiable dans jquery

Comment définir un champ pour qu'il ne soit pas modifiable dans jquery

PHPz
PHPzoriginal
2023-04-26 14:22:50971parcourir

Dans le développement front-end, nous devons souvent créer des formulaires et laisser les utilisateurs remplir le contenu du formulaire. Différents champs du formulaire doivent être définis sur différents états, certains champs sont en lecture seule et certains champs peuvent devoir être complètement désactivés. Dans ces scénarios, nous pouvons utiliser jQuery pour rendre les champs non modifiables.

1. Pourquoi devons-nous définir des champs pour qu'ils ne soient pas modifiables

Dans les applications pratiques, nous devons souvent définir certains champs du formulaire pour qu'ils ne soient pas modifiables, par exemple :

  1. Une fois que l'utilisateur a soumis le formulaire, afin de garantir la sécurité des données, les champs du formulaire doivent être verrouillés, pour empêcher les utilisateurs de modifier les informations soumises.
  2. Certaines informations sensibles, telles que les mots de passe des comptes, les codes de vérification SMS, etc., doivent être définies en mode lecture seule pour empêcher les utilisateurs de les modifier.
  3. Certains champs du formulaire doivent être désactivés sous certaines conditions. Par exemple, lors d'un paiement, si un certain mode de paiement est sélectionné, il doit être interdit à l'utilisateur de modifier le montant du paiement et d'autres informations.

2. Comment utiliser jQuery pour définir des champs non modifiables

jQuery est une bibliothèque JavaScript très populaire qui peut être utilisée pour simplifier les opérations sur les documents HTML, la gestion des événements, les effets d'animation et d'autres opérations. Dans jQuery, nous pouvons utiliser la fonction attr() pour définir l'état non modifiable des zones de texte, des listes déroulantes, des cases à cocher et d'autres éléments.

Maintenant, regardons un exemple de code simple :





jQuery le champ de paramètre n'est pas modifiable

<script> <br>$(document).ready(function(){<br> // Désactiver la zone de texte <br> $("input[type='text']").attr("disabled", "disabled");</p> <p>// Désactiver le dépôt -down Box<br> $("select").attr("disabled", "disabled");</p> <p>// Désactiver la case à cocher<br> $("input[type='checkbox']").attr("disabled", " désactivé");<br>});<br></script>



Nom d'utilisateur :


Mot de passe :


Sexe : 

<select>
  <option value="male">男</option>
  <option value="female">女</option>
</select>

Loisirs : 

<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐




3. jQuery implémente les états en lecture seule et désactivé des champs

Dans l'exemple ci-dessus, nous avons utilisé l'attribut désactivé pour désactiver l'élément de formulaire. Mais que se passe-t-il si nous devons définir un élément de formulaire en lecture seule ? À l'heure actuelle, cela peut être réalisé en définissant l'attribut en lecture seule.

La différence entre l'attribut en lecture seule et l'attribut désactivé est que l'attribut en lecture seule interdit uniquement aux utilisateurs de modifier la valeur d'un élément de formulaire, mais les utilisateurs peuvent toujours modifier la valeur de l'élément via des scripts JS et d'autres méthodes. L'attribut désactivé désactive complètement l'élément de formulaire et les utilisateurs ne peuvent pas utiliser l'élément.

Maintenant, regardons un exemple de code pour implémenter le statut en lecture seule et désactivé d'un champ :




jQuery définit le champ en lecture seule et l'état désactivé