jQuery désactiver et activer l'entrée
Activer et désactiver le champ de saisie est une opération facile à l’aide de jQuery. Ce tutoriel montre comment désactiver ou activer le champ de saisie dans jQuery.
jQuery Désactiver l’entrée
La méthode prop() peut désactiver une entrée en utilisant jQuery. La syntaxe de cette méthode est donnée ci-dessous.
prop('disabled', true)
Il prend deux paramètres, la valeur disabled, qui vaut true. Essayons un exemple pour la méthode prop().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable Enable Input with jQuery</title>
<style>
label {
display: block;
margin: 10px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".disable").click(function(){
if($(this).prop("checked") == true){
$('form input[type="text"]').prop("disabled", true);
}
});
});
</script>
</head>
<body>
<form>
<label><input type="checkbox" class="disable"> Check the box to disable the input fields below</label>
<label>Name: <input type="text" name="username"></label>
<label>ID: <input type="text" name="username"></label>
<label>Address: <input type="text" name="username"></label>
</form>
</body>
</html>
Le code ci-dessus désactivera l’entrée une fois que nous aurons coché la case. Voir la sortie :
jQuery Activer l’entrée
De même, la méthode prop est également utilisée pour activer les entrées dans jQuery. La syntaxe pour activer l’entrée sera :
prop('disabled', false)
Là où le paramètre true sera changé en false, essayons un exemple pour activer l’entrée.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable Enable Input with jQuery</title>
<style>
label {
display: block;
margin: 10px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('form input[type="text"]').prop("disabled", true);
$(".disable").click(function(){
if($(this).prop("checked") == true){
$('form input[type="text"]').prop("disabled", false);
}
});
});
</script>
</head>
<body>
<form>
<label><input type="checkbox" class="disable"> Check the box to enable the input fields below</label>
<label>Name: <input type="text" name="username"></label>
<label>ID: <input type="text" name="username"></label>
<label>Address: <input type="text" name="username"></label>
</form>
</body>
</html>
Le code ci-dessus désactive d’abord tous les champs, puis les active en cochant la case. Voir la sortie :
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook