HTMLSelectElement.disabled — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.disabled

Beschreibung

Die Eigenschaft disabled von HTMLSelectElement liest oder setzt, ob ein <select>-Element deaktiviert ist. Sie spiegelt das gleichnamige HTML-Attribut wider: Mit select.disabled = true wird das Attribut disabled gesetzt, mit false wird es entfernt.

Ein deaktiviertes Auswahlfeld lässt sich nicht fokussieren und nicht bedienen. Es löst keine Benutzerereignisse wie change oder input aus und wird beim Absenden des Formulars nicht mitgeschickt. Die meisten Browser zeigen es außerdem ausgegraut an und lassen es in der Tab-Reihenfolge aus.

Typische Einsatzfälle sind abhängige Auswahllisten (z. B. „Stadt“ bleibt deaktiviert, bis ein „Land“ gewählt wurde), das Sperren von Eingaben während einer laufenden Anfrage an den Server oder Felder, die nur unter bestimmten Bedingungen bearbeitet werden dürfen.

Wichtig: Ein <select> kann auch dann faktisch deaktiviert sein, wenn seine eigene disabled-Eigenschaft false ist, nämlich wenn ein übergeordnetes <fieldset disabled> es sperrt. Ob das der Fall ist, prüft man mit select.matches(':disabled').

Beispiele

Auswahlfeld deaktivieren und Zustand abfragen

const select = document.createElement('select');
select.add(new Option('Rot', 'red'));
document.body.append(select);

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

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

false true true false

Abhängige Auswahllisten: Stadt erst nach Land wählbar

// HTML: <select id="land"><option value="">Bitte wählen</option><option value="de">Deutschland</option><option value="at">Österreich</option></select>
//       <select id="stadt" disabled></select>
const staedte = {
  de: ['Berlin', 'Hamburg', 'München'],
  at: ['Wien', 'Graz', 'Linz'],
};

const land = document.querySelector('#land');
const stadt = document.querySelector('#stadt');

land.addEventListener('change', () => {
  const liste = staedte[land.value] ?? [];
  stadt.replaceChildren(...liste.map((name) => new Option(name, name)));
  stadt.disabled = liste.length === 0;
});

Während einer Anfrage an den Server sperren

const select = document.querySelector('#kategorie');

const ladeKategorien = async () => {
  select.disabled = true;
  try {
    const res = await fetch('/api/kategorien');
    const daten = await res.json();
    select.replaceChildren(...daten.map((k) => new Option(k.name, k.id)));
  } catch (err) {
    console.error('Laden fehlgeschlagen:', err);
  } finally {
    select.disabled = false;
  }
};

ladeKategorien();

Deaktivierung durch ein fieldset erkennen

// HTML: <fieldset disabled><select id="groesse"><option>M</option></select></fieldset>
const groesse = document.querySelector('#groesse');

console.log(groesse.disabled);            // false – eigenes Attribut fehlt
console.log(groesse.matches(':disabled')); // true – durch fieldset gesperrt

false true

// Wichtig · Fallstricke

Keine Übertragung beim Absenden: Die Werte deaktivierter Felder fehlen in den Formulardaten und in FormData. Wenn der Wert zwar nicht änderbar sein, aber trotzdem mitgeschickt werden soll, ergänzt man ein verstecktes <input type="hidden">. Das Attribut readonly wird von <select> nicht unterstützt.
Vererbte Deaktivierung: Die Eigenschaft gibt nur das eigene Attribut wieder. Eine Sperre durch <fieldset disabled> erkennt man mit matches(':disabled').
Keine Sicherheitsgrenze: Wer die Entwicklerwerkzeuge nutzt, kann disabled jederzeit entfernen. Eingaben müssen deshalb immer auf dem Server geprüft werden.
Barrierefreiheit: Deaktivierte Felder sind nicht fokussierbar, sodass Screenreader sie beim Durchgehen mit der Tabulatortaste überspringen. Soll ein Feld sichtbar und auffindbar bleiben, kann aria-disabled="true" die bessere Wahl sein. Dann muss die Bedienung allerdings selbst verhindert werden.
Einzelne Optionen: Um nur bestimmte Einträge zu sperren, nutzt man HTMLOptionElement.disabled oder HTMLOptGroupElement.disabled.
Umwandlung in boolean: Jeder Wert, der als wahr gilt, zum Beispiel der String 'false', setzt das Attribut. Deshalb sollte man immer echte boolesche Werte zuweisen.
Die Eigenschaft wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

HTMLSelectElement HTMLOptionElement.disabled HTMLFieldSetElement.disabled HTMLInputElement.disabled HTMLButtonElement.disabled Element.matches()