Перейти к содержанию

:disabled

Псевдо-класс :disabled находит любой отключенный элемент.

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

Псевдоклассы

Синтаксис

1
2
3
4
/* Selects any disabled <input> */
input:disabled {
  background: #ccc;
}

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

Примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<form action="#">
  <fieldset id="shipping">
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Address" />
    <input type="text" placeholder="Zip Code" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing_is_shipping">Same as shipping address:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="Name" disabled />
    <input type="text" placeholder="Address" disabled />
    <input type="text" placeholder="Zip Code" disabled />
  </fieldset>
</form>

1
2
3
input[type='text']:disabled {
  background: #ccc;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// Wait for the page to finish loading
document.addEventListener(
  'DOMContentLoaded',
  function() {
    // Attach `change` event listener to checkbox
    document.getElementById('billing-checkbox').onchange = toggleBilling
  },
  false
)

function toggleBilling() {
  // Select the billing text fields
  var billingItems = document.querySelectorAll('#billing input[type="text"]')

  // Toggle the billing text fields
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled
  }
}

Результат работы псевдокласса :disabled

Комментарии