Логический disabled атрибут, если он присутствует, делает элемент недоступным для изменения, фокусировки или даже отправки с формой. Пользователь не может ни редактировать, ни фокусироваться на элементе управления или его потомках.
Если disabled атрибут указан в элементе управления формой, элемент и его потомки элемента управления формой не участвуют в проверке ограничений. Часто браузеры выделяют такие элементы управления серым цветом и не получают никаких событий просмотра, таких как щелчки мыши или события, связанные с фокусом.
Атрибут disabledподдерживается <button>, <fieldset>, <optgroup>, <option>, <select>, <textarea> и <input>.
Этот логический отключенный атрибут указывает, что пользователь не может взаимодействовать с элементом управления или его дочерними элементами управления. Если этот атрибут не указан, элемент управления наследует свою настройку от содержащего его элемента, например fieldset; если нет содержащего элемента с disabled установленным атрибутом, а сам элемент управления не имеет атрибута, то элемент управления включен. Если объявлено в <optgroup>, выбор остается интерактивным (если не отключено иное), но ни один из элементов в группе параметров не может быть выбран.
Примечание. Если a <fieldset> отключен, все элементы управления дочерней формой отключены, за исключением элементов управления формы в файле <legend>.
Если к вспомогательному элементу disabled применен атрибут, :disabled к нему также применяется псевдокласс. И наоборот, элементы, которые поддерживают disabled атрибут, но не имеют набора атрибутов, соответствуют псевдоклассу :enabled.
Этот логический атрибут не позволяет пользователю взаимодействовать с кнопкой. Если этот атрибут не установлен, кнопку все равно можно отключить из содержащего ее элемента, например <fieldset>; если содержащего элемента с установленным атрибутом нет disabled, кнопка активна.
Firefox, в отличие от других браузеров, будет сохранять динамическое отключенное состояние при <button> загрузке страниц. Используйте :autocomplete атрибут для управления этой функцией.
Разница между disabled и :readonly заключается в том, что элементы управления, доступные только для чтения, по-прежнему могут функционировать и по-прежнему доступны для фокусировки, тогда как отключенные элементы управления не могут получать фокус и не отправляются вместе с формой и обычно не функционируют как элементы управления, пока они не включены.
Поскольку значение отключенного поля не может быть изменено, :required оно не оказывает никакого влияния на входные данные с disabled указанным атрибутом. Кроме того, поскольку элементы становятся неизменяемыми, большинство других атрибутов, таких как :pattern, не действуют, пока элемент управления не будет включен.
Примечание. Атрибут required не разрешен для входных данных с disabled указанным атрибутом.
Браузеры отображают отключенные элементы управления формой серым цветом, поскольку отключенные элементы управления формой являются неизменяемыми, не получают фокус или какие-либо события просмотра, такие как щелчки мыши или события, связанные с фокусом, и не отправляются вместе с формой.
Если он присутствует во вспомогательных элементах, :disabled псевдокласс будет соответствовать. Если атрибут не включен, :enabled псевдокласс будет соответствовать. Если элемент не поддерживает отключенный атрибут, атрибут не будет иметь никакого эффекта, в том числе не приведет к сопоставлению с псевдоклассами :disabled и :enabled.
Если элемент равен disabled, то значение элемента не может получить фокус и не может быть обновлено пользователем, а также не участвует в проверке ограничений.
Когда элементы управления формой отключены, многие браузеры по умолчанию отображают их более светлым, серым цветом. Ниже приведены примеры отключенного флажка, переключателя <option> и <optgroup>, а также некоторых элементов управления формой, которые отключаются с помощью атрибута Disable, установленного в <fieldset> элементе-предке. S <option> отключены, но <select> сам нет. Мы могли бы отключить все <select>, добавив атрибут к этому элементу, а не к его потомкам.