HTMLOptionElement.disabled — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOptionElement.disabled

Beschreibung

Die Eigenschaft disabled von HTMLOptionElement spiegelt das HTML-Attribut disabled eines <option>-Elements wider. Ist sie true, kann der Benutzer diese Option weder per Maus noch per Tastatur auswählen. Browser zeigen sie meist ausgegraut an.

Typische Anwendungsfälle sind abhängige Auswahllisten (z. B. ausverkaufte Größen in einem Shop, belegte Termine) oder ein Platzhalter wie „Bitte wählen…“, den man nach der ersten Auswahl nicht mehr erneut auswählen kann. Setzt man die Eigenschaft per JavaScript, wird das Attribut sofort hinzugefügt bzw. entfernt. Umgekehrt ändert setAttribute('disabled', '') auch den Wert der Eigenschaft.

Wichtig: Diese Eigenschaft gibt nur den eigenen Zustand der Option wieder. Liegt die Option in einer deaktivierten <optgroup disabled> oder in einem deaktivierten <select>, ist sie zwar faktisch nicht auswählbar, option.disabled bleibt aber trotzdem false. Für den tatsächlichen Zustand eignet sich die CSS-Pseudoklasse :disabled, etwa mit option.matches(':disabled').

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut disabled an der Option gesetzt ist, sonst false. Beim Schreiben wird das Attribut hinzugefügt (true) oder entfernt (false).

Beispiele

Zustand lesen und setzen

// HTML: <select id="size"><option>S</option><option>M</option><option>L</option></select>
const select = document.querySelector('#size');
const optionM = select.options[1];

console.log(optionM.disabled); // false
optionM.disabled = true;       // Größe M ist nicht mehr auswählbar
console.log(optionM.disabled, optionM.hasAttribute('disabled'));

false true true

Ausverkaufte Größen dynamisch deaktivieren

const stock = { S: 4, M: 0, L: 2, XL: 0 };
const select = document.querySelector('#size');

for (const option of select.options) {
  const soldOut = (stock[option.value] ?? 0) === 0;
  option.disabled = soldOut;
  option.textContent = soldOut ? `${option.value} (ausverkauft)` : option.value;
}

const available = [...select.options].filter((o) => !o.disabled).map((o) => o.value);
console.log(available);

["S", "L"]

Platzhalter-Option nach erster Auswahl sperren

// HTML: <select id="land"><option value="">Bitte wählen…</option><option value="de">Deutschland</option><option value="at">Österreich</option></select>
const select = document.querySelector('#land');

select.addEventListener('change', () => {
  const placeholder = select.options[0];
  placeholder.disabled = select.value !== '';
  console.log('Platzhalter gesperrt:', placeholder.disabled);
});

Platzhalter gesperrt: true

Effektiven Zustand inkl. optgroup prüfen

// HTML: <select><optgroup label="Alt" disabled><option id="alt">Modell A</option></optgroup></select>
const option = document.querySelector('#alt');

console.log(option.disabled);            // eigenes Attribut
console.log(option.matches(':disabled')); // tatsächlicher Zustand

false true

// Wichtig · Fallstricke

Vererbung wird nicht angezeigt: Eine deaktivierte <optgroup> oder ein deaktiviertes <select> ändern option.disabled nicht. Den tatsächlichen Zustand prüft man mit option.matches(':disabled').
Bereits ausgewählte Optionen: Wird eine gerade ausgewählte Option deaktiviert, bleibt sie ausgewählt (selected bleibt true) und ihr Wert wird weiterhin mit dem Formular gesendet. Bei Bedarf muss man die Auswahl selbst zurücksetzen, z. B. mit select.selectedIndex = -1 oder indem man eine andere Option wählt.
Nur für die Benutzeroberfläche: Per Skript lässt sich eine deaktivierte Option weiterhin auswählen (option.selected = true oder select.value = …). Außerdem ist disabled kein Sicherheitsmechanismus: Eingaben immer auf dem Server prüfen.
Setzt man einen beliebigen Wert, wird er in einen booleschen Wert umgewandelt. Auch das HTML-Attribut disabled=\"false\" deaktiviert die Option, denn es zählt nur, ob das Attribut vorhanden ist.
Die Darstellung deaktivierter Optionen lässt sich per CSS in nativen Auswahllisten nur begrenzt anpassen, besonders auf Mobilgeräten.
Wird in allen modernen Browsern seit Langem unterstützt.

Siehe auch

Element.matches() HTMLGeolocationElement.isValid HTMLOptionElement.label HTMLOptionElement.index HTMLOptionElement.selected