So deaktivieren und aktivieren Sie Input mit jQuery: Vollständiger Leitfaden

So deaktivieren und aktivieren Sie Input mit jQuery? Leitfaden für Anfänger und Fortgeschrittene

Stell dir vor: Du erstellst ein Registrierungsformular, und solange der Benutzer kein Land ausgewählt hat, soll das Feld „Stadt“ gesperrt sein. Oder du hast einen Online-Shop, und der Button „Bestellung aufgeben“ ist inaktiv, bis das Zustimmungskästchen gesetzt ist. Kommt dir bekannt vor? Diese Aufgabe ist das tägliche Brot eines jeden Frontend-Entwicklers. Und heute werden wir sie unter die Lupe nehmen.

Die Frage „Disable/enable an input with jQuery?“ ist eine der beliebtesten auf Stack Overflow (tausende Aufrufe und dutzende Antworten). Und das ist kein Zufall: Die scheinbare Einfachheit verbirgt einige Fallstricke, auf die Anfänger hereinfallen. In diesem Leitfaden zeigen wir nicht nur Code – wir bringen dir bei, wie ein jQuery-Ninja zu denken. Los geht's!

Warum sollte man .attr() für disabled nicht verwenden?

Wenn du bereits nach einer Lösung gegoogelt hast, bist du sicherlich auf alte Ratschläge wie $('input').attr('disabled', 'disabled'); gestoßen. Das funktionierte in der jQuery 1.x-Ära, aber heute ist das ein Weg ins Nichts. Warum?

• .attr() arbeitet mit HTML-Attributen, während .prop() mit Eigenschaften des DOM-Objekts arbeitet.
• Das Attribut disabled ist eine boolesche Eigenschaft, die true oder false sein sollte, kein String.
• Bei Verwendung von .attr('disabled', false) kann jQuery das Attribut zwar entfernen, aber den Zustand nicht immer korrekt zurücksetzen.

Der moderne Standard ist die Verwendung von .prop(). Merk dir das wie das „Vaterunser“:

// Input deaktivieren$('#myInput').prop('disabled', true);

// Input wieder aktivieren$('#myInput').prop('disabled', false);

Einfach, oder? Aber lass uns tiefer graben.

Grundlegende Beispiele: Einzelnen Input deaktivieren und aktivieren

Angenommen, wir haben ein E-Mail-Eingabefeld und einen Trigger-Button. Wir möchten, dass das Feld durch Klicken auf den Button gesperrt oder entsperrt wird.

<input type="email" id="emailInput" placeholder="E-Mail eingeben"><button id="toggleBtn">Feld sperren</button>

<script>$(document).ready(function() {    $('#toggleBtn').on('click', function() {        var $input = $('#emailInput');        var isDisabled = $input.prop('disabled');                // Zustand umschalten        $input.prop('disabled', !isDisabled);                // Button-Text ändern        $(this).text(isDisabled ? 'Feld sperren' : 'Feld entsperren');    });});</script>

Beachte: Wir verwenden $(document).ready() – dies stellt sicher, dass das DOM geladen ist, bevor das Skript ausgeführt wird. Ohne dies könnte dein Code die Elemente möglicherweise nicht finden.

Arbeit mit Elementgruppen: Select, Checkbox und Textarea

Die Methode .prop() ist universell. Sie funktioniert nicht nur mit <input>, sondern auch mit <select>, <textarea>, <button> und sogar mit ganzen Elementsätzen.

Alle Formularelemente auf einmal sperren

Stell dir vor, du musst das gesamte Formular nach dem Absenden sperren, damit der Benutzer keine Daten mehr ändern kann:

<form id="myForm">    <input type="text" name="name" placeholder="Name">    <input type="email" name="email" placeholder="E-Mail">    <select name="country">        <option value="">Land auswählen</option>        <option value="ru">Russland</option>        <option value="us">USA</option>    </select>    <button type="submit">Absenden</button></form>

<script>// Alle input, select und textarea innerhalb des Formulars sperren$('#myForm').find('input, select, textarea, button').prop('disabled', true);</script>

Noch eleganter: Verwende :input – das ist ein jQuery-Pseudo-Selektor, der alle Elemente auswählt