disabled атрибут HTML

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

Попробуйте

<form>
  <label for="name">Name:</label>
  <input id="name" name="name" type="text" />

  <label for="emp">Employed:</label>
  <select id="emp" name="emp" disabled>
    <option>No</option>
    <option>Yes</option>
  </select>

  <label for="empDate">Employment Date:</label>
  <input id="empDate" name="empDate" type="date" disabled />

  <label for="resume">Resume:</label>
  <input id="resume" name="resume" type="file" />
</form>

label {
  display: block;
  margin-top: 1em;
}

*:disabled {
  background-color: dimgrey;
  color: linen;
  opacity: 1;
}

Обзор

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

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

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

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

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

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

Взаимодействие атрибутов

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

Поскольку значение отключённого поля нельзя изменить, атрибут 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="ch-box" value="regular" /> Regular
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="ch-box" 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>

Спецификации

Совместимость с браузерами

html.elements.button.disabled

html.elements.fieldset.disabled

html.elements.input.disabled

html.elements.optgroup.disabled

html.elements.option.disabled

html.elements.select.disabled

html.elements.textarea.disabled

См. также

• :disabled и :enabled