Heim > Artikel > Web-Frontend > Vergleich von JavaScript-Methoden: Aktivieren oder deaktivieren Sie Schaltflächen mit jQuery vs. Vanilla

Vergleich von JavaScript-Methoden: Aktivieren oder deaktivieren Sie Schaltflächen mit jQuery vs. Vanilla

PHPzOriginal: 2023-08-28 17:05:09593Durchsuche

比较 JavaScript 方法：使用 jQuery 与 Vanilla 启用或禁用按钮

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.

Verwenden Sie Vanilla JavaScript, um Schaltflächen zu aktivieren oder zu 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

auf 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>

So aktivieren oder deaktivieren Sie Schaltflächen mit einfachem JavaScript. Im nächsten Abschnitt erfahren Sie, wie Sie die jQuery-Bibliothek verwenden.

Schaltflächen mit jQuery aktivieren oder deaktivieren

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

jQuery-Objekts werden verwendet, um den Wert einer bestimmten Eigenschaft eines Elements festzulegen oder abzurufen. Wenn Sie es mit nur einem einzigen Parameter verwenden, wird dieser verwendet, um den Wert einer Eigenschaft abzurufen. Wenn Sie es hingegen mit zwei Parametern verwenden, wird es zum Festlegen des Werts der Eigenschaft verwendet. In unserem Fall verwenden wir es, um den Wert der

-Eigenschaft der Schaltfläche festzulegen. Ansonsten ist alles gleich. prop 方法而不是 attr

Wenn Sie jQuery 1.5+ verwenden, müssen Sie die Methode prop anstelle der Methode

verwenden, wie im folgenden Codeausschnitt gezeigt. removeAttr 方法，如以下代码片段所示。其结果与将 disabled 属性设置为 false

//...
$('#submitButton').prop('disabled', true);

Alternativ können Sie, wenn Sie Attribute eines Elements entfernen möchten, auch die Methode 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');

Dies sind die verschiedenen Möglichkeiten, wie Sie Schaltflächen mit jQuery aktivieren oder deaktivieren können.

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!

JavaScript jquery html 对象事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einfacher Tipp: jQuery analysieren – GrepNächster Artikel：Einfacher Tipp: jQuery analysieren – Grep

In Verbindung stehende Artikel

Mehr sehen