In diesem Artikel besprechen wir, wie Sie Schaltflächen mithilfe von JavaScript aktivieren oder deaktivieren. Zuerst sehen wir, wie es in einfachem JavaScript funktioniert, und später sehen wir, wie man es mit jQuery implementiert.
JavaScript ist eine der Kerntechnologien des Internets. Es wird von den meisten Websites verwendet und von allen modernen Webbrowsern unterstützt, ohne dass Plugins erforderlich sind. In dieser Serie besprechen wir verschiedene Tipps und Tricks, die Ihnen bei Ihrer täglichen JavaScript-Entwicklung helfen.
Wenn Sie JavaScript verwenden, müssen Sie häufig Schaltflächen basierend auf bestimmten Aktionen aktivieren oder deaktivieren. Wenn Sie mit Formularen arbeiten, möchten Sie normalerweise die Schaltfläche „Senden“ deaktiviert lassen, bis der Benutzer alle erforderlichen Felder im Formular ausfüllt. Sobald der Benutzer alle erforderlichen Felder ausfüllt, möchten Sie es automatisch aktivieren, damit der Benutzer auf eine Schaltfläche klicken kann, um das Formular abzusenden.
In HTML haben Schaltflächenelemente ihren eigenen Status, sodass Sie ihn aktiviert oder deaktiviert lassen können. Beispielsweise können Sie eine Schaltfläche deaktiviert lassen, während das Formular geladen wird. Später können Sie es mit Hilfe von JavaScript aktivieren.
Heute besprechen wir anhand einiger praktischer Beispiele, wie Sie Schaltflächen mithilfe von JavaScript aktivieren oder deaktivieren.
In diesem Abschnitt besprechen wir ein praktisches Beispiel, das zeigt, wie man eine Schaltfläche mit einfachem JavaScript aktiviert oder deaktiviert.
Schauen wir uns das folgende Beispiel an.
<html>
<head>
<script>
function toggleButton()
{
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username && password) {
document.getElementById('submitButton').disabled = false;
} else {
document.getElementById('submitButton').disabled = true;
}
}
</script>
</head>
<body>
<div>
<form action="/submit.php" method="post">
Username:<input type="text" name="username" id="username" onchange="toggleButton()">
Password:<input type="password" name="password" id="password" onchange="toggleButton()">
<input id="submitButton" type="submit" value="Submit" disabled/>
</form>
</div>
</body>
</html>
Im obigen Beispiel haben wir ein sehr einfaches Formular mit ein paar Textfeldern und einer Schaltfläche zum Senden erstellt. Es ist wichtig zu beachten, dass nach dem Laden des Formulars die Schaltfläche „Senden“ deaktiviert ist. Wir verwenden das Attribut disabled, um den Standardstatus der Schaltfläche „Senden“ auf „Deaktiviert“ zu setzen.
Als nächstes definieren wir das Ereignis onchange in den Eingabefeldern Benutzername und Passwort. Wenn der Benutzer den Wert dieser Felder ändert, wird daher das Ereignis onchange ausgelöst, das letztendlich die Funktion toggleButton aufruft. In der Funktion toggleButton prüfen wir, ob der Benutzer einen Wert in die beiden Pflichtfelder eingegeben hat. Wenn dies der Fall ist, setzen wir das Attribut onchange 事件。因此，当用户更改这些字段的值时，就会触发 onchange 事件，该事件最终调用 toggleButton 函数。在 toggleButton 函数中，我们检查用户是否在两个必填字段中输入了值。如果是这种情况，我们将提交按钮的 disabled 属性设置为 false，这最终会启用提交按钮，以便用户可以单击该按钮。另一方面，如果用户名或密码字段为空，我们将 disabled 属性设置为 true der Schaltfläche „Senden“ auf false, wodurch die Schaltfläche „Senden“ letztendlich aktiviert wird, sodass der Benutzer darauf klicken kann. Wenn das Feld „Benutzername“ oder „Passwort“ hingegen leer ist, setzen wir das Attribut
true, wodurch die Schaltfläche „Senden“ deaktiviert wird, sodass der Benutzer nicht darauf klicken kann. Im obigen Beispiel haben wir die Eingabe-Senden-Schaltfläche verwendet, Sie können aber auch eine HTML-Schaltfläche verwenden, wie im Beispiel unten gezeigt.
<button id="submitButton" disabled/>Submit</button>
In diesem Abschnitt besprechen wir, wie Sie den Status einer Schaltfläche mithilfe der jQuery-Bibliothek umschalten.
Ändern wir das im vorherigen Abschnitt besprochene Beispiel.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
function toggleButton()
{
var username = $('#username').val();
var password = $('#password').val();
if (username && password) {
$('#submitButton').attr('disabled', false);
} else {
$('#submitButton').attr('disabled', true);
}
}
</script>
</head>
<body>
<div>
<form action="/submit.php" method="post">
Username:<input type="text" name="username" id="username" onchange="toggleButton()">
Password:<input type="password" name="password" id="password" onchange="toggleButton()">
<input id="submitButton" type="submit" value="Submit" disabled/>
</form>
</div>
</body>
</html>
attrZuerst haben wir die jQuery-Bibliothek geladen, damit wir sie in unserer Funktion verwenden können. Der einzige Unterschied im obigen Beispiel besteht darin, dass wir die -Methode des jQuery-Objekts verwenden, um den Status der Schaltfläche zu ändern.
Die attr 方法用于设置或获取元素的特定属性的值。如果仅将其与单个参数一起使用，则它将用于获取属性的值。另一方面，如果将它与两个参数一起使用，则它用于设置属性的值。在我们的例子中，我们使用它来设置按钮的 disabled-Methoden des
-Eigenschaft der Schaltfläche festzulegen. Ansonsten ist alles gleich. prop 方法而不是 attr
prop anstelle der Methode verwenden, wie im folgenden Codeausschnitt gezeigt. removeAttr 方法，如以下代码片段所示。其结果与将 disabled 属性设置为 false
//...
$('#submitButton').prop('disabled', true);
removeAttr des jQuery-Objekts verwenden, wie im folgenden Codeausschnitt gezeigt. Das Ergebnis ist dasselbe, als würde man das Attribut auf false setzen.
//...
$('#submitButton').removeAttr('disabled');
Fazit
🎜Heute haben wir anhand einiger praktischer Beispiele besprochen, wie man Schaltflächen in JavaScript aktiviert oder deaktiviert. Zusätzlich zu einfachem JavaScript haben wir auch besprochen, wie man dies mit Hilfe der jQuery-Bibliothek erreichen kann. 🎜Das obige ist der detaillierte Inhalt vonVergleich von JavaScript-Methoden: Aktivieren oder deaktivieren Sie Schaltflächen mit jQuery vs. Vanilla. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Verwendung der Isalpha-Funktion
Einführung in die Verwendung des gesamten VBS-Codes
Wie kann das Problem gelöst werden, dass für die Laptop-Netzwerkfreigabe keine Berechtigungen vorhanden sind?
Was sind die SEO-Keyword-Ranking-Tools?
vs2010-Schlüssel
So ändern Sie das CAD-Layout von Weiß auf Schwarz
Was sind die Merkmale von LAN?
ostringstream-Nutzung
