:disabled

Описание

CSS псевдо-класс :disabled находит любой отключенный элемент. Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.

Примеры

Пример селекторов

input:disabled

Выберет все отключенные поля ввода

select.country:disabled

Найдёт все отключенные select элементы с классом country

Пример использования

Следующий CSS:

input[type="text"]:disabled { background: #ccc; }

Применим к этому HTML5 фрагменту:

<form action="#">
  <fieldset>
    <legend>Адрес доставки</legend>
    <input type="text" placeholder="Имя">
    <input type="text" placeholder="Адрес">
    <input type="text" placeholder="Почтовый индекс">
  </fieldset>
  <fieldset id="billing">
    <legend>Адрес оплаты</legend>
    <label for="billing_is_shipping">Такой же как адрес доставки:</label>
    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
    <br />
    <input type="text" placeholder="Имя" disabled>
    <input type="text" placeholder="Адрес" disabled>
    <input type="text" placeholder="Почтовый индекс" disabled>
  </fieldset>
</form>

Добавим немного javascript:

function toggleBilling() {
  var billingItems = document.querySelectorAll('#billing input[type="text"]');
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

Результатом будет отключение всех полей в группе адреса оплаты и окраска их в серый цвет.

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

Поддержка браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Смотрите также

• :enabled