Heim > Artikel > Web-Frontend > Wie entferne ich das Attribut „disabled“ aus einem HTML-Eingabeelement mithilfe von JavaScript?

Wie entferne ich das Attribut „disabled“ aus einem HTML-Eingabeelement mithilfe von JavaScript?

WBOYnach vorne: 2023-08-31 13:17:02646Durchsuche

如何使用 JavaScript 从 HTML 输入元素中删除“禁用”属性？

In HTML können wir Eingabeelemente verwenden, um Eingaben von den Benutzern entgegenzunehmen, indem wir ein Formular erstellen oder auf andere Weise. Es gibt verschiedene Arten von Eingabeelementen, wie zum Beispiel Kontrollkästchen, Optionsfelder, Text, Zahlen usw.

Wir können die Eigenschaft „disabled“ für jedes Element verwenden, um das Eingabefeld zu deaktivieren und Benutzer daran zu hindern, mit dem Eingabeelement zu interagieren. In einigen Fällen müssen wir das deaktivierte Attribut mithilfe von JavaScript hinzufügen und entfernen. Beispielsweise möchten wir die Pan-Card-Nummern der Benutzer verwenden, deren Alter über 18 Jahre beträgt. Daher müssen wir das Pan-Card-Eingabefeld nur dann aktivieren, wenn der Benutzer ein Alter über 18 Jahren eingibt, indem wir die deaktivierte Eigenschaft aus JavaScript entfernen.

Hier lernen wir verschiedene Ansätze kennen, um das deaktivierte Attribut mithilfe von JavaScript aus dem HTML-Eingabeelement zu entfernen.

Verwenden der Methode „removeAttribute()“

Im ersten Ansatz verwenden wir die Methode „removeAttribute()“, um das deaktivierte Attribut zu entfernen. Es wird verwendet, um jedes Attribut aus einem HTML-Element zu entfernen, das wir als Parameter der Methode übergeben.

Syntax

Benutzer können der folgenden Syntax folgen, um mit der Methode „removeAttribute()“ das Attribut „disabled“ aus dem Eingabeelement zu entfernen.

element.removeAttribute("disabled");

In der obigen Syntax haben wir den Attributnamen, der „deaktiviert“ ist, als Parameter der Methode übergeben.

Beispiel

Im Beispiel unten haben wir das Texteingabefeld im HTML-Teil definiert. Immer wenn Benutzer auf die Schaltfläche klicken, wird die Funktion „removeDisabled()“ aufgerufen.

In der Funktion remvoeDisabled() greifen wir über seine ID auf das Eingabeelement zu. Danach führen wir die Methode „removeAttribute()“ aus, indem wir das Eingabeelement als Referenz nehmen und „disabled“ als Parameter übergeben.

In der Ausgabe können Benutzer beobachten, dass sie vor dem Klicken auf die Schaltfläche nicht mit dem Eingabeelement interagieren können, dies jedoch nach dem Klicken auf die Schaltfläche möglich ist.

<html>
<body>
    <h3> Using the <i> removeAttribute() </i> method to remove disabled attribute from HTML input element </h3>
    <input type = "text" name = "first name" id = "name" value = "Shubham" disabled>
    <button onclick = "removeDisabled()"> Remove Disabled </button>
    <script>
        function removeDisabled() {
            let name = document.getElementById("name");
            name.removeAttribute("disabled");
        }
    </script>
</html>

Ändern der Eigenschaft „deaktiviert“

Bei diesem Ansatz ändern wir den Wert der Eigenschaft „disabled“, anstatt die Eigenschaft „disabled“ aus einem HTML-Element zu entfernen. Die Eigenschaft „disabled“ nimmt den booleschen Wert an. Der Standardwert für die Eigenschaft „disabled“ ist „true“, aber wir können ihn auf „false“ setzen und es funktioniert genauso, wenn wir die Eigenschaft „disabled“ aus jedem Eingabeelement entfernen.

Syntax

Benutzer können der folgenden Syntax folgen, um den Wert der deaktivierten Eigenschaft in „false“ zu ändern.

input.disabled = false;

Beispiel 1

Im folgenden Beispiel haben wir mehrere Texteingabeelemente erstellt, die alle standardmäßig deaktiviert sind. In JavaScript greifen wir auf alle Eingabeelemente zu und verwenden die Methode forEach(), um Iterationen durch die Knotenliste der Eingabe durchzuführen. Innerhalb der forEach()-Methode ändern wir den Wert der deaktivierten Eigenschaft jeder Eingabe in false.

In der Ausgabe können Benutzer beobachten, dass alle Eingabeelemente nach dem Klicken auf die Schaltfläche unlösbar sind.

<html>
<body>
    <h3> setting the <i> disable property value </i> to remove disabled attribute from HTML input element  </h3>
    <!-- creating multiple text inputs -->
    <input type = "text" id = "myText" value = "Hello World!" disabled> <br> <br>
    <input type = "text" id = "second" value = "How are you?" disabled>
    <button onclick = "removeDisabled()"> Remove Disabled </button>
    <script>
        function removeDisabled() {
            let textsInput = document.querySelectorAll("input[type='text']");
            textsInput.forEach((input) => {
                input.disabled = false;
            });
        }
    </script>
</html>

Beispiel 2

Im folgenden Beispiel haben wir mehrere Kontrollkästcheneingaben erstellt und allen Kontrollkästchen deaktivierte Attribute hinzugefügt, um sie zu deaktivieren. In der Funktion „removeDisable()“ greifen wir auf alle Kontrollkästchen zu und ändern die Eigenschaft „disabled“ jedes Kontrollkästchens.

<html>
<body>
    <h3> Setting the <i> disable property value </i> to remove disabled attribute from HTML input element.</h3>
    <!-- creating multiple checkboxes -->
    <input type = "checkbox" value = "male" disabled> male
    <input type = "checkbox" value = "female" disabled> female
    <input type = "checkbox" value = "other" disabled> Other
    <button onclick = "removeDisabled()"> Remove Disabled </button>
    <script>
        function removeDisabled() {
            let checkboxes = document.querySelectorAll('input[type="checkbox"]');
            for (let i = 0; i < checkboxes.length; i++) {
                checkboxes[i].disabled = false;
            }
        }
    </script>
</html>

Wir haben gelernt, die deaktivierte Eigenschaft mithilfe von JavaScript aus den Eingabeelementen zu entfernen. Im ersten Ansatz haben wir die Methode „removeAttribute()“ verwendet, die die Eigenschaft „disabled“ aus einem Eingabeelement entfernt. Im zweiten Element ändern wir den Wert der Eigenschaft „disabled“, anstatt sie aus dem HTML-Element zu entfernen, aber wir können unser Ziel, das Eingabeelement zu aktivieren, erreichen.

Das obige ist der detaillierte Inhalt vonWie entferne ich das Attribut „disabled“ aus einem HTML-Eingabeelement mithilfe von JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html Boolean if for foreach checkbox require using Attribute Property function default this input Access

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Ein genauerer Blick auf CanJS: Teil 2Nächster Artikel：Ein genauerer Blick auf CanJS: Teil 2

In Verbindung stehende Artikel

Mehr sehen