HTMLInputElement.disabled — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.disabled

Beschreibung

Die Eigenschaft disabled eines HTMLInputElement liest oder setzt den Deaktivierungszustand eines Eingabefelds. Sie spiegelt das gleichnamige HTML-Attribut wider: Mit input.disabled = true wird das Attribut disabled gesetzt, mit false wird es entfernt.

Ein deaktiviertes Feld lässt sich nicht fokussieren oder anklicken und nicht bearbeiten. Es wird bei der Constraint-Validierung übersprungen und beim Absenden des Formulars nicht mitgeschickt. Browser stellen es meist ausgegraut dar. Über die CSS-Pseudoklassen :disabled und :enabled kannst du es gezielt gestalten.

Typische Einsatzfälle sind: den Absende-Button sperren, solange eine Anfrage läuft, abhängige Felder erst freigeben, wenn eine Vorbedingung erfüllt ist (z. B. eine Checkbox „Andere Lieferadresse“), oder doppeltes Absenden verhindern.

Wichtig: Der tatsächliche Zustand kann auch von einem übergeordneten <fieldset disabled> kommen. In diesem Fall bleibt input.disabled false, obwohl das Feld nicht bedienbar ist. Den tatsächlichen Zustand prüfst du zuverlässig mit input.matches(':disabled').

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` deaktiviert das Feld (Attribut wird gesetzt), `false` aktiviert es (Attribut wird entfernt). Andere Werte werden in einen booleschen Wert umgewandelt.

Beispiele

Zustand lesen und umschalten

const input = document.createElement('input');
console.log(input.disabled); // false

input.disabled = true;
console.log(input.hasAttribute('disabled')); // true
console.log(input.outerHTML);

input.disabled = false;
console.log(input.hasAttribute('disabled')); // false

false true <input disabled=""> false

Absende-Button während einer Anfrage sperren

const form = document.querySelector('#kontakt');
const submit = form.querySelector('input[type="submit"]');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  submit.disabled = true; // doppeltes Absenden verhindern
  try {
    const response = await fetch('/api/kontakt', {
      method: 'POST',
      body: new FormData(form)
    });
    console.log('Status:', response.status);
  } catch (err) {
    console.error('Fehler beim Senden:', err);
  } finally {
    submit.disabled = false;
  }
});

Status: 200

Abhängiges Feld per Checkbox freigeben

// HTML: <input type="checkbox" id="andere"> <input id="lieferadresse" disabled>
const checkbox = document.querySelector('#andere');
const adresse = document.querySelector('#lieferadresse');

checkbox.addEventListener('change', () => {
  adresse.disabled = !checkbox.checked;
  if (!adresse.disabled) adresse.focus();
});

Tatsächlichen Zustand inklusive fieldset prüfen

// HTML: <fieldset disabled><input id="name"></fieldset>
const name = document.querySelector('#name');

console.log(name.disabled);             // false – Attribut fehlt am Input
console.log(name.matches(':disabled')); // true – durch fieldset gesperrt

false true

// Wichtig · Fallstricke

Keine Übermittlung: Deaktivierte Felder fehlen in FormData und beim normalen Absenden des Formulars. Soll ein Wert nur gesperrt, aber trotzdem übertragen werden, verwende readOnly. Das gilt allerdings nicht für Checkboxen, Radiobuttons und Buttons.
Attribut-Falle: input.setAttribute('disabled', 'false') deaktiviert das Feld trotzdem, denn allein die Anwesenheit des Attributs zählt. Verwende die Eigenschaft oder removeAttribute('disabled').
fieldset: Wenn ein übergeordnetes <fieldset disabled> das Feld sperrt, ändert sich die Eigenschaft nicht. Den tatsächlichen Zustand liefert matches(':disabled').
Events: Deaktivierte Elemente lösen keine Maus-Events wie click aus und können nicht fokussiert werden. Tooltips über das Attribut title erscheinen in manchen Browsern nicht.
Barrierefreiheit: Deaktivierte Felder sind per Tastatur nicht erreichbar. Screenreader-Nutzer erfahren so eventuell nicht, warum ein Feld gesperrt ist. Als Alternative bietet sich aria-disabled="true" mit eigener Logik an.
Sicherheit: disabled ist nur eine Einschränkung der Bedienoberfläche und lässt sich über die Entwicklertools leicht umgehen. Prüfe Eingaben immer auf dem Server.
Die Eigenschaft wird von allen Browsern unterstützt. Das Gleiche gilt für HTMLButtonElement, HTMLSelectElement, HTMLTextAreaElement und HTMLFieldSetElement.

Siehe auch

Element.matches() HTMLInputElement.dirName HTMLInputElement.files HTMLInputElement.alt HTMLInputElement.checked