:disabled

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

Попробуйте

Синтаксис

:disabled {
  /* ... */
}

Примеры

Этот пример демонстрирует простую форму для ввода данных о доставке. Он использует событие JavaScript change для включения/выключения полей для ввода данных об оплате.

HTML

<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-checkbox">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>

CSS

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

JavaScript

Переключение полей ввода с отключённым состоянием, когда нажимается флажок

const checkbox = document.querySelector("#billing-checkbox");
const billingItems = document.querySelectorAll('#billing input[type="text"]');

checkbox.addEventListener("change", () => {
  billingItems.forEach((item) => {
    item.disabled = !item.disabled;
  });
});

Результат

Отметьте или снимите отметку с флажка, чтобы изменить стиль полей для ввода данных об оплате.

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

Спецификация
Стандарт HTML # selector-disabled
Уровень 4 селекторов # enableddisabled

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`:disabled`	1	12 До версии Edge 79 Edge не распознавал `:disabled` для элемента `<fieldset>`.	1	9	3.1	18	4	10.1	2	1.0	2

См. также

:enabled

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled