HTML атрибут disabled
Атрибут disabled — это boolean-атрибут, указывающий, что элемент должен быть отключён. Узнайте об этом атрибуте и элементах, на которых его можно применять.
HTML атрибут disabled является boolean-атрибутом и указывает, что элемент должен быть отключён.
Этот атрибут можно использовать для того, чтобы запретить взаимодействие с элементом до выполнения определённого условия, например, установки флажка. При его наличии элемент не реагирует на действия пользователя и не может получить фокус. Кроме того, отключённые элементы управления формы не отправляются вместе с формой. Элемент можно снова сделать доступным, удалив атрибут disabled с помощью JavaScript. Отключённые элементы, как правило, отображаются серым цветом.
Атрибут disabled можно использовать на следующих элементах: <button>, <fieldset>, <input>, <optgroup>, <option>, <select> и <textarea>.
Когда атрибут disabled применяется к элементу, к нему также применяется псевдокласс :disabled, что позволяет стилизовать отключённые элементы управления в CSS. Элементы, поддерживающие атрибут disabled, но не имеющие его, соответствуют псевдоклассу :enabled.
Синтаксис
<tag disabled></tag>Поскольку disabled является boolean-атрибутом, его простого наличия достаточно для активации. Значение указывать не нужно: disabled, disabled="" и disabled="disabled" — полностью эквивалентны. Чтобы отключить его, удалите атрибут полностью.
disabled и readonly
Оба атрибута запрещают пользователю изменять элемент управления формы, но ведут себя по-разному. Неправильный выбор — распространённый источник ошибок, особенно когда значение поля всё равно должно поступать на сервер.
| Поведение | disabled | readonly |
|---|---|---|
| Значение отправляется с формой | Нет | Да |
| Может получать фокус с клавиатуры | Нет | Да |
| Выглядит редактируемым (курсор, выделение текста) | Нет (серый) | Да |
Соответствует :disabled / :read-only | :disabled | :read-only |
| Объявляется программами экранного доступа | Часто пропускается | Объявляется нормально |
| Работает со всеми типами элементов управления | <input>, <select>, <textarea>, <button> и др. | только текстовые <input> и <textarea> |
Используйте disabled, когда элемент управления должен быть полностью неактивным и его значение должно игнорироваться. Используйте readonly, когда нужно, чтобы пользователь видел (и мог скопировать) значение, но не редактировал его, при этом оно всё равно отправляется с формой.
Доступность
Отключённый элемент исключается из порядка обхода по Tab, не воспринимает клики и нередко пропускается вспомогательными технологиями. Это легко упустить: пользователь программы экранного доступа, перемещающийся по форме с помощью Tab, может так и не узнать о существовании отключённой кнопки «Отправить» и о причине её отключения.
Если вы хотите, чтобы элемент управления выглядел и вёл себя как недоступный, но при этом оставался в порядке фокусировки и озвучивался, используйте атрибут aria-disabled="true" вместо нативного атрибута disabled. При использовании aria-disabled элемент управления остаётся в порядке обхода по Tab и объявляется как «недоступный/затемнённый», однако вы должны самостоятельно предотвращать его действие в JavaScript — браузер не будет блокировать клики или отправку формы.
Практическое правило: используйте нативный disabled для элементов управления, которые действительно не должны участвовать в форме, а aria-disabled — когда важнее обеспечить их обнаруживаемость, чем встроенную защиту.
Примеры для каждого элемента
Пример использования HTML атрибута disabled на элементе <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Button</button> <br /><br />
<button type="button" disabled>Disabled button</button>
</body>
</html>Пример использования HTML атрибута disabled на элементе <fieldset>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 22px;
}
</style>
</head>
<body>
<form>
<fieldset disabled>
<legend>Personal Information:</legend>
<div>
<label>First Name:</label>
<input type="text" />
</div>
<div>
<label>Last Name:</label>
<input type="text" />
</div>
<div>
<label>Date of birth:</label>
<input type="text" />
</div>
</fieldset>
</form>
</body>
</html>Когда элемент <fieldset> отключён, все вложенные элементы управления формы также отключаются, кроме элементов управления внутри элемента <legend>.
Пример использования HTML атрибута disabled на элементе <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="get">
<input type="text" name="name" placeholder="Enter your name" />
<input type="number" name="Date of birth:" placeholder="Date of birth:" disabled/>
<input type="submit" value="Submit" />
</form>
</body>
</html>Пример использования HTML атрибута disabled на элементе <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books" disabled>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Пример использования HTML атрибута disabled на элементе <option>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet" disabled>Tablet</option>
</select>
</form>
</body>
</html>Пример использования HTML атрибута disabled на элементе <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select disabled>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Пример использования HTML атрибута disabled на элементе <textarea>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<textarea name="comment" rows="8" cols="50" disabled>Send your comments to the author.</textarea>
</form>
</body>
</html>Переключение disabled с помощью JavaScript
Распространённый паттерн — держать элемент управления отключённым до тех пор, пока пользователь не совершит определённое действие: например, включать кнопку «Отправить» только после установки флажка. В JavaScript каждый элемент управления формы имеет boolean-свойство disabled. Установите его в true, чтобы отключить элемент, и в false, чтобы включить:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label>
<input type="checkbox" id="agree" /> I accept the terms
</label>
<br /><br />
<button id="submit" type="button" disabled>Submit</button>
<script>
const agree = document.getElementById("agree");
const submit = document.getElementById("submit");
agree.addEventListener("change", function () {
// Enable the button only while the checkbox is checked
submit.disabled = !agree.checked;
});
</script>
</body>
</html>Присвоение element.disabled = true добавляет атрибут, а element.disabled = false удаляет его. Обратите внимание, что свойство является boolean-значением, а не строкой "disabled", поэтому всегда присваивайте true или false.