Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
:disabled
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
Apseudo-classeCSS:disabled representa qualquer elemento desativado. Um elemento é desativado se não puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado habilitado, no qual ele pode ser ativado ou aceitar o foco.
css
/* Selects any disabled <input> */input:disabled { background: #ccc;}Sintaxe
Error: could not find syntax for this itemExemplo
Este exemplo mostra um formulário básico de envio. Ele usa o eventoJavaScriptchange para permitir que o usuário ative / desative os campos de faturamento.
HTML
html
<form action="#"> <fieldset> <legend>Shipping address</legend> <input type="text" placeholder="Name" /> <input type="text" placeholder="Address" /> <input type="text" placeholder="Zip Code" /> </fieldset> <br /> <fieldset> <legend>Billing address</legend> <label for="billing-checkbox">Same as shipping address:</label> <input type="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
css
input[type="text"]:disabled { background: #ccc;}JavaScript
js
// Wait for the page to finish loadingdocument.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; }}Resultado
Especificações
| Specification |
|---|
| HTML # selector-disabled |
| Selectors Level 4 # disabled-pseudo |