jQuery Eingabe deaktivieren und aktivieren
Das Aktivieren und Deaktivieren des Eingabefelds ist mit jQuery ein einfacher Vorgang. Dieses Tutorial zeigt, wie Sie das Eingabefeld in jQuery deaktivieren oder aktivieren.
jQuery Eingabe deaktivieren
Die Methode prop() kann eine Eingabe mit jQuery deaktivieren. Die Syntax für diese Methode ist unten angegeben.
prop('disabled', true)
Es braucht zwei Parameter, den Wert disabled, der auf true gesetzt wird. Versuchen wir ein Beispiel für die Methode 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>
Der obige Code deaktiviert die Eingabe, sobald wir das Kontrollkästchen aktiviert haben. Siehe Ausgabe:
jQuery Eingabe aktivieren
Ebenso wird die Methode prop auch verwendet, um die Eingaben in jQuery freizugeben. Die Syntax zum Aktivieren der Eingabe lautet:
prop('disabled', false)
Wo der Parameter true auf false geändert wird, versuchen wir ein Beispiel, um die Eingabe zu aktivieren.
<!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>
Der obige Code deaktiviert zuerst alle Felder und aktiviert sie dann, indem er das Kontrollkästchen aktiviert. Siehe Ausgabe:
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