Атрибут HTML: disabled

Булевый disabled атрибут, при наличии, делает элемент не изменяемым, не фокусируемым и даже не отправляет его вместе с формой. Пользователь не может ни редактировать, ни сфокусироваться на элементе управления, ни на его дочерних элементах управления формой.

Если disabled атрибут указан на элементе управления формой, элемент и его дочерние элементы управления формой не участвуют в проверке ограничений. Часто браузеры делают такие элементы серыми, и они не получат никаких событий прокрутки, таких как щелчки мышью или связанные с фокусом.

Атрибут disabled поддерживается <button>, <fieldset>, <optgroup>, <option>, <select>, <textarea> и <input>.

Этот булевый атрибут disabled указывает, что пользователь не может взаимодействовать с элементом управления или его дочерними элементами управления. Если этот атрибут не указан, элемент управления наследует своё состояние от содержащего элемента, например, fieldset; если нет содержащего элемента с установленным disabled атрибутом, и сам элемент управления не имеет атрибута, то элемент управления является активным. Если объявлен на <optgroup>, список все ещё интерактивен (если не отключен), но ни один из элементов в группе опций не выбирается.

Когда у поддерживающего элемента применён атрибут disabled, к нему также применяется псевдокласс :disabled. И наоборот, элементы, которые поддерживают атрибут disabled, но не имеют его установленного, соответствуют псевдоклассу :enabled.

Этот булевый атрибут предотвращает взаимодействие пользователя с кнопкой. Если этот атрибут не установлен, кнопку всё ещё можно отключить из содержащего элемента, например, <fieldset>; если нет содержащего элемента с установленным disabled атрибутом, то кнопка активна.

Firefox, в отличие от других браузеров, сохраняет динамическое состояние disabled кнопки <button> при переходе на страницу. Используйте атрибут autocomplete для управления этой функцией.

Разница между disabled и readonly заключается в том, что элементы с атрибутом read-only всё ещё могут функционировать и фокусироваться, в то время как элементы с атрибутом disabled не могут получить фокус и не отправляются вместе с формой и, как правило, не работают как элементы управления, пока не будут активированы.

Поскольку значение отключенного поля изменить нельзя, required не оказывает никакого влияния на поля ввода с указанным атрибутом disabled. Кроме того, поскольку элементы становятся неизменяемыми, большинство других атрибутов, таких как pattern, не имеют эффекта, пока элемент управления не будет активирован.

Браузеры отображают отключённые элементы управления форм серыми, так как отключённые элементы управления формы неизменяемы, не получают фокус или какие-либо события прокрутки, такие как щелчки мышью или связанные с фокусом, и не отправляются вместе с формой.

Если он присутствует в поддерживающих элементах, псевдокласс :disabled будет соответствовать. Если атрибут не включён, псевдокласс :enabled будет соответствовать. Если элемент не поддерживает атрибут disabled, этот атрибут не оказывает никакого эффекта, включая то, что он не приводит к соответствию псевдоклассам :disabled и :enabled.

Если элемент disabled, значение элемента не может получить фокус и не может быть обновлено пользователем, и не участвует в проверке ограничений.

Когда элементы управления формой отключены, многие браузеры по умолчанию отображают их в более светлом, серым цвете. Ниже приведены примеры отключенной галочки, радиокнопки, <option> и <optgroup>, а также некоторые элементы управления формой, которые отключены с помощью атрибута disabled, установленного на предке <fieldset> элемент. Элементы <option> отключены, но сам <select> не отключён. Мы могли бы отключить весь <select>, добавив атрибут этому элементу, а не его потомкам.

<fieldset>
  <legend>Checkboxes</legend>
  <p>
    <label>
      <input type="checkbox" name="chbox" value="regular" /> Regular
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="chbox" value="disabled" disabled /> disabled
    </label>
  </p>
</fieldset>

<fieldset>
  <legend>Radio buttons</legend>
  <p>
    <label> <input type="radio" name="radio" value="regular" /> Regular </label>
  </p>
  <p>
    <label>
      <input type="radio" name="radio" value="disabled" disabled /> disabled
    </label>
  </p>
</fieldset>

<p>
  <label
    >Select an option:
    <select>
      <optgroup label="Group 1">
        <option>Option 1.1</option>
      </optgroup>
      <optgroup label="Group 2">
        <option>Option 2.1</option>
        <option disabled>Option 2.2</option>
        <option>Option 2.3</option>
      </optgroup>
      <optgroup label="Group 3" disabled>
        <option>Disabled 3.1</option>
        <option>Disabled 3.2</option>
        <option>Disabled 3.3</option>
      </optgroup>
    </select>
  </label>
</p>

<fieldset disabled>
  <legend>Disabled fieldset</legend>
  <p>
    <label>
      Name: <input type="radio" name="radio" value="regular" /> Regular
    </label>
  </p>
  <p>
    <label>Number: <input type="number" /></label>
  </p>
</fieldset>

• :disabled и :enabled