Maison  >  Article  >  interface Web  >  Comment changer l'entrée en lecture seule dans jquery

Comment changer l'entrée en lecture seule dans jquery

青灯夜游
青灯夜游original
2022-06-09 17:04:554346parcourir

Deux méthodes d'implémentation : 1. Utilisez attr() pour ajouter l'attribut readonly à l'élément d'entrée et définissez la valeur de l'attribut sur "readonly", la syntaxe est "$("input").attr("readonly"," lecture seule"); ". 2. Utilisez prop() pour ajouter l'attribut readonly à l'élément d'entrée et définissez la valeur de l'attribut sur "true", en utilisant la syntaxe "$("input").prop("readonly",true);".

Comment changer l'entrée en lecture seule dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.0, ordinateur Dell G3.

Si vous souhaitez rendre l'entrée en lecture seule, ajoutez simplement l'attribut en lecture seule (lecture seule) à l'élément d'entrée.

Par conséquent, l'utilisation de jquery pour modifier l'entrée en état de lecture seule est convertie en l'utilisation de jquery pour ajouter l'attribut en lecture seule à l'élément d'entrée.

Il existe les deux méthodes d'implémentation suivantes :

  • Utilisez attr()

  • Utilisez prop()

1. Utilisez attr() pour définir le statut en lecture seule de l'élément d'entrée

.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("input").attr("readonly","readonly");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<input type="text" value="hello"/><br /><br />

		<button>给input添加只读属性</button>
	</body>
</html>

Comment changer lentrée en lecture seule dans jquery

2. Utilisez prop() pour définir le statut en lecture seule de l'élément d'entrée

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("input").prop("readonly",true);
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<input type="text" value="hello"/><br /><br />

		<button>给input添加只读属性</button>
	</body>
</html>

Comment changer lentrée en lecture seule dans jquery

Explication :

En fait, la méthode prop() est similaire à la méthode attr( ), les deux sont utilisées pour obtenir ou définir les attributs HTML de l'élément , mais il existe également des différences essentielles entre les deux.

Recommandation officielle de jQuery : pour les attributs avec deux valeurs true et false, tels que vérifié, sélectionné, désactivé, etc., il est recommandé d'utiliser la méthode prop() pour fonctionner, tandis que d'autres attributs sont recommandés d'utiliser la méthode attr() pour fonctionner.

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end

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!

Déclaration:
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