disabled selector

:disabled

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

 / * Выбирает любой отключенный * / input:disabled < background: #ccc; >

Syntax

Examples

В этом примере показана базовая форма доставки. Он использует событие change 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

// Дождемся завершения загрузки страницы document.addEventListener('DOMContentLoaded', () => < // Прикрепляем слушателя событий `change` к флажку document.getElementById('billing-checkbox').onchange = toggleBilling; >, false); function toggleBilling( ) < // Выбираем текстовые поля биллинга const billingItems = document.querySelectorAll('#billing input[type="text"]'); // Переключаем текстовые поля биллинга billingItems.forEach((item) => < item.disabled = !item.disabled; >); >

Result

Specifications

Источник

:disabled

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

Примеры

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

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

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

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

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; > > 

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

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

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

BCD tables only load in the browser

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

Found a content problem with this page?

This page was last modified on 14 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

:disabled¶

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

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

Синтаксис¶

/* Selects any disabled */ 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 addresslegend> input type="text" placeholder="Name" /> input type="text" placeholder="Address" /> input type="text" placeholder="Zip Code" /> fieldset> br /> fieldset id="billing"> legend>Billing addresslegend> 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> 

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

Источник

CSS disabled

The disabled is a selector in CSS, which is used to turn off the HTML elements. This disabled selector mainly works on form elements like text areas, buttons, checkboxes, drop-down boxes, etc.

Web development, programming languages, Software testing & others

Real-Time Example: Suppose we fill a form with all our credentials like name, mobile number, Employee number, etc. Once we have entered all details, it will ask for confirmation to submit them. Once we submit, not all the details will allow for updating. The employee number is disabled to update because it is unique. Automatically it is disabled. In this kind of situation, we have used disabled selectors in CSS.

How Does disabled Done in CSS?

As we discussed, disabled done on form pages in HTML. We can turn off the buttons, text fields, checkboxes, drop-down boxes, etc. by using the disabled selector on required HTML form elements.

input[type=text]:disabled < /*CSS declarations*/ > Country: 

Examples

Example #1 – Field disabled

    h1 < color:orange; >input[type=text]:enabled < background: lightgray; >input[type=text]:disabled < background: red; font-size: 20px; >input < margin-top:10px; border:1px solid brown; font-size: 20px; >body < text-align:center; >p < color: brown; font-size: 22px; border: 2px ridge blue; >label 
Disabled Demo for Text Field
 
Let suppose I am filling a form with all my credentials like my name, my mobile number, Employee number etc. Once I have entered all my details it will ask you for are sure confirm to submit the details. Once we submitted not all the details are going to allow for updating. Employee number is disabled to update because it is unique. Automatically is disabled. This kind of situation we have used disabled selector in CSS.
 First Name : 
Last Name:  
Address:  

Explanation: As you can see in the output, you can edit the fields for First Name and Last Name, while the Address field is disabled and cannot be edited.

Example #2 – Disabled Button

    h1 < color:orange; >input[type=text]:enabled < background: lightblue; >input[type=text]:disabled < background: red; font-size: 20px; >input < margin-top:10px; border:1px solid pink; font-size: 20px; >body < text-align:center; >p < color: red; font-size: 22px; border: 2px ridge green; >label < font-size: 20px; color: blue; font-weight: bold; >button 
Disabled Demo for Button Field
 
Let suppose I am filling a form with all my credentials like my name, my mobile number, Employee number etc. Once I have entered all my details it will ask you for are sure confirm to submit the details. Once we submitted not all the details are going to allow for updating. Employee number is disabled to update because it is unique. Automatically is disabled. This kind of situation we have used disabled selector in CSS.
 
First Name : 
Last Name:  
Country:  
 
Edit Details 
  lt;/html>

Explanation: As you can see in the output First Name and LastName can be editable, but the button is disabled, so we can’t edit it.

Example #3 – Text Area disabled

    h1 < color:red; >input[type=text]:enabled < background: lightgreen; >input[type=text]:disabled < background: red; font-size: 20px; >input < margin-top:10px; border:1px solid red; font-size: 20px; >body < text-align:center; >p < color: fuchsia; font-size: 22px; border: 2px ridge navy; >label < font-size: 20px; color: orange; font-weight: bold; >button 
Disabled Demo for Button Field
 
Let suppose I am filling a form with all my credentials like my name, my mobile number, Employee number etc. Once I have entered all my details it will ask you for are sure confirm to submit the details. Once we submitted not all the details are going to allow for updating. Employee number is disabled to update because it is unique. Automatically is disabled. This kind of situation we have used disabled selector in CSS.
 
Name : 
Email: [email protected]"> 
Country:  
 
comments: Hi, I am Paramesh. I am disabled. 
 
Edit Details 
  

Explanation: As you can see, we can’t edit the text area as it is disabled.

Conclusion

The “disabled” selector in CSS is used to style and disable elements. We can use this disabled selector on form fields like buttons, text area, button, text field, etc.

Recommended Articles

We hope that this EDUCBA information on “CSS disabled” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

38+ Hours of HD Videos
9 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

149+ Hours of HD Videos
28 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

253+ Hours of HD Videos
51 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests
82+ Hours of HD Videos
19 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник