Атрибут disabled тега <option>

Описание

Атрибут disabled для элемента <option> делает опцию в выпадающем списке недоступной для выбора. Это булевый атрибут — его наличие отключает элемент независимо от значения.

Пример использования:
<select> <option value="1">Доступная опция</option> <option value="2" disabled>Недоступная опция</option> <option value="3">Другая опция</option> </select>

Особенности работы:

Состояние Визуальное отображение Доступность Отправка формы
Активная опция Обычный текст Доступна для выбора Значение отправляется
Отключенная опция (disabled) Серый/бледный текст Недоступна Значение не отправляется

Рекомендации по использованию:

  • Используйте для временно недоступных вариантов
  • Применяйте как заголовки групп (вместе с hidden)
  • Сочетайте с JavaScript для динамического управления
  • Добавляйте пояснение в тексте опции

Пример с группировкой:

<select> <option disabled selected hidden>Выберите страну</option> <option disabled>-- Европа --</option> <option>Франция</option> <option disabled>-- Азия --</option> <option>Япония</option> </select>

Стилизация отключенных опций:

<style> option:disabled { color: #ccc; font-style: italic; background: #f5f5f5; } </style> <select> <option disabled selected>Выберите вариант</option> <option>Активный вариант</option> </select>

Особенности доступности:

  • Скринридеры объявляют статус "недоступно"
  • Отключенные элементы пропускаются при навигации с клавиатуры
  • Рекомендуется добавлять текстовое пояснение

Примечание: Для важных вариантов, которые должны быть всегда видны, но недоступны, используйте disabled. Для временно скрытых вариантов лучше применять JavaScript-управление видимостью.