HTMLButtonElement.disabled — Eigenschaft · JavaScript-Referenz

Signatur

HTMLButtonElement.disabled

Beschreibung

Die Eigenschaft disabled spiegelt das gleichnamige HTML-Attribut eines <button>-Elements. Sie ist ein boolean: true heißt, der Button ist deaktiviert. Er reagiert dann nicht auf Klicks, lässt sich weder mit der Tastatur noch per Tab-Taste fokussieren und schickt kein Formular ab.

Typische Einsätze sind:

Den Absende-Button sperren, solange ein Formular ungültig ist.
Doppelte Übermittlung verhindern, während ein fetch-Aufruf noch läuft.
Aktionen sperren, für die dem Nutzer die Berechtigung fehlt.

Setzt man button.disabled = true, fügt der Browser das Attribut disabled="" hinzu. Mit false entfernt er es wieder. Umgekehrt ist die Eigenschaft true, sobald das Attribut vorhanden ist, egal mit welchem Wert. Auch disabled="false" deaktiviert den Button also.

Ein Button ist auch dann deaktiviert, wenn er in einem <fieldset disabled> liegt, ohne im ersten <legend> zu stehen. Die Eigenschaft disabled des Buttons bleibt in diesem Fall aber false. Den tatsächlichen Zustand prüft man zuverlässig mit button.matches(':disabled').

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Wird beim Setzen zugewiesen. Andere Werte werden in einen Wahrheitswert umgewandelt, z. B. wird `"false"` (ein nicht leerer String) zu `true`.

Beispiele

Zustand lesen und umschalten

const btn = document.querySelector('#save');
console.log(btn.disabled);

btn.disabled = true;
console.log(btn.hasAttribute('disabled'));

btn.disabled = !btn.disabled;
console.log(btn.disabled);

false true false

Doppeltes Absenden während fetch verhindern

const form = document.querySelector('#contact');
const submitBtn = form.querySelector('button[type="submit"]');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  submitBtn.disabled = true;
  submitBtn.textContent = 'Wird gesendet …';
  try {
    const res = await fetch('/api/contact', {
      method: 'POST',
      body: new FormData(form)
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    form.reset();
  } catch (err) {
    console.error('Senden fehlgeschlagen:', err);
  } finally {
    submitBtn.disabled = false;
    submitBtn.textContent = 'Senden';
  }
});

Button erst bei gültigem Formular freigeben

const form = document.querySelector('#signup');
const btn = form.querySelector('button[type="submit"]');

const update = () => {
  btn.disabled = !form.checkValidity();
};

form.addEventListener('input', update);
update(); // Anfangszustand setzen

Deaktivierung durch ein fieldset erkennen

// HTML: <fieldset disabled><button id="b">OK</button></fieldset>
const b = document.querySelector('#b');
console.log(b.disabled);
console.log(b.matches(':disabled'));

false true

// Wichtig · Fallstricke

Attributwert zählt nicht: setAttribute('disabled', 'false') deaktiviert den Button trotzdem. Zum Aktivieren schreibt man disabled = false oder removeAttribute('disabled').
Keine Sicherheitsgrenze: Jeder kann disabled über die Entwicklerwerkzeuge entfernen. Berechtigungen und Eingaben müssen deshalb immer auf dem Server geprüft werden.
Barrierefreiheit: Ein deaktivierter Button fällt aus der Tab-Reihenfolge, und Screenreader übergehen ihn oft. Soll der Button weiter fokussierbar bleiben, etwa um einen Tooltip mit Begründung zu zeigen, nutzt man stattdessen aria-disabled="true" und blockiert den Klick im Handler selbst.
Events: Deaktivierte Buttons lösen kein click aus. Wie sich andere Maus-Events auf dem Element verhalten, unterscheidet sich historisch zwischen den Browsern. Wer Tooltips braucht, legt die Listener besser auf ein umgebendes Element.
Formulardaten: Name und Wert eines deaktivierten Buttons werden beim Absenden nicht übertragen.
Zurücksetzen nicht vergessen: Setzt man disabled = false in einem finally-Block zurück, bleibt der Button auch nach einem Fehler nicht dauerhaft gesperrt.
Browser: Die Eigenschaft wird in allen Browsern unterstützt. Die Pseudoklasse :disabled eignet sich zum Gestalten per CSS.

Siehe auch

Element.matches() HTMLButtonElement.command HTMLButtonElement.labels HTMLButtonElement.name HTMLButtonElement.value