HTML 属性：disabled

尝试一下

label {

display: block;

margin-top: 1em;

}

*:disabled {

background-color: dimgrey;

color: linen;

opacity: 1;

}

总览

如果在表单控件上指定了 disabled 属性，则该元素及其子控件不参与约束验证。通常浏览器会将它们打灰处理，它不会收到任何浏览事件，如鼠标点击或与焦点相关的事件。

这些元素支持 disabled 属性：、

、、、、 和 <input>。</p> <p>这个布尔型 disabled 属性表示用户不能与该控件或其后代控件进行交互。如果没有指定这个属性，控件会从包含元素中继承其设置，例如 fieldset；如果没有设置 disabled 属性的包含元素，并且控件本身没有这个属性，那么该控件是启用的。如果在 <optgroup> 上声明，选择仍然是交互式的（除非另行禁用），但选项组中的项目都不能选择。</p> <p>备注：如果 <fieldset> 被禁用，那么除了 <legend> 内的表单控件外，其下级表单控件都被禁用。</p> <p>当一个支持的元素应用了 disabled 属性，:disabled 伪类也适用于它。反之，支持 disabled 属性但没有设置该属性的元素与 :enabled 伪类匹配。</p> <p>这个布尔属性可以防止用户与按钮进行交互。如果没有设置这个属性，按钮仍然可以从一个包含元素中被禁用，例如 <fieldset>；如果没有设置 disabled 属性的包含元素，那么按钮就是启用的。</p> <p>与其他浏览器不同的是，Firefox 会在不同的页面加载中持续保持 <button> 的动态禁用状态。使用 autocomplete 属性来控制这个特性。</p> <p>属性交互</p> <p>disabled 和 readonly 之间的区别是，只读控件仍然可以发挥作用，仍然可以聚焦，而禁用控件不能接受聚焦，也不随表单提交，通常在启用之前不能作为控件发挥作用。</p> <p>因为不能改变一个禁用字段的值，所以 required 对同时指定 disabled 属性的输入没有任何影响。此外，由于元素变得不可改变，大多数其他属性，如 pattern，在控件被启用之前没有任何作用。</p> <p>备注：required 属性不可在含有 disabled 属性的 input 元素上使用。</p> <p>可用性</p> <p>浏览器将禁用的表单控件显示为灰色，因为禁用的表单控件是不可改变的，不会收到焦点或任何浏览事件，如鼠标点击或与焦点相关的事件，也不会随表单提交。</p> <p>如果所支持的元素上存在该属性，将匹配 :disabled 伪类。如果该属性未被包含，则将匹配 :enabled 伪类。如果该元素不支持 disabled 属性，该属性将没有任何作用，包括不会导致被 :disabled 和 :enabled 伪类匹配。</p> <p>约束验证</p> <p>如果该元素含有 disabled 属性，那么该元素的值就不能聚焦，不能被用户更新，也不参与约束验证。</p> <p>示例</p> <p>当表单控件被禁用时，许多浏览器会默认以较浅的灰色显示它们。下面是禁用复选框、单选按钮、<option> 和 <optgroup> 的例子，以及一些通过在祖先 <fieldset> 元素上设置的禁用属性禁用的表单控件。<option> 是禁用的，但 <select> 本身却没有。我们可以通过为该元素而不是其子元素添加属性来禁用整个 <select>。</p> <p>html<fieldset></p> <p><legend>复选框</legend></p> <p><p></p> <p><label> <input type="checkbox" name="chbox" value="regular" /> 普通 </label></p> <p></p></p> <p><p></p> <p><label></p> <p><input type="checkbox" name="chbox" value="disabled" disabled /> 禁用</p> <p></label></p> <p></p></p> <p></fieldset></p> <p><fieldset></p> <p><legend>单选按钮</legend></p> <p><p></p> <p><label> <input type="radio" name="radio" value="regular" /> 普通 </label></p> <p></p></p> <p><p></p> <p><label></p> <p><input type="radio" name="radio" value="disabled" disabled /> 禁用</p> <p></label></p> <p></p></p> <p></fieldset></p> <p><p></p> <p><label</p> <p>>选择一个选项：</p> <p><select></p> <p><optgroup label="第一组"></p> <p><option>选项 1.1</option></p> <p></optgroup></p> <p><optgroup label="第二组"></p> <p><option>选项 2.1</option></p> <p><option disabled>选项 2.2</option></p> <p><option>选项 2.3</option></p> <p></optgroup></p> <p><optgroup label="第三组" disabled></p> <p><option>禁用的 3.1</option></p> <p><option>禁用的 3.2</option></p> <p><option>禁用的 3.3</option></p> <p></optgroup></p> <p></select></p> <p></label></p> <p></p></p> <p><fieldset disabled></p> <p><legend>禁用的 fieldset</legend></p> <p><p></p> <p><label> 名字：<input type="name" name="radio" value="普通" /> </label></p> <p></p></p> <p><p></p> <p><label>数字：<input type="number" /></label></p> <p></p></p> <p></fieldset></p> <p>规范</p> <p>Specification</p> <p>HTML# attr-fe-disabled</p> <p>HTML# attr-optgroup-disabled</p> <p>HTML# attr-option-disabled</p> <p>浏览器兼容性</p> <p>html.elements.button.disabled</p> <p>Loading…</p> <p>html.elements.fieldset.disabled</p> <p>Loading…</p> <p>html.elements.input.disabled</p> <p>Loading…</p> <p>html.elements.optgroup.disabled</p> <p>Loading…</p> <p>html.elements.option.disabled</p> <p>Loading…</p> <p>html.elements.select.disabled</p> <p>Loading…</p> <p>html.elements.textarea.disabled</p> <p>Loading…</p> <p>参见</p> <p>:disabled 和 :enabled</p> <p>Help improve MDN</p> <p>Was this page helpful to you?</p> <p>Yes</p> <p>No</p> <p>Learn how to contribute</p> <p>This page was last modified on ⁨2025年8月6日⁩ by MDN contributors.</p> <p>View this page on GitHub • Report a problem with this content</p> </div> <div class="pagination"> <a href="/4e26ca3ebc0045c1/754d4daf7d1e6e09.html">← 镳字开头的成语有哪些(以镳开头的成语)</a> <a href="/4e26ca3ebc0045c1/49219c262e7d4565.html">狗狗吐白沫怎么办？了解原因与应对措施很重要 →</a> </div> </article> </div> <div class="main-content"> <h2 class="section-title">相关推荐</h2> <div class="article-honeycomb"> <div class="article-cell"> <span class="category-badge">Bte365</span> <img src="/0.jpg" alt="单反机不拍时要关机吗" class="article-image"> <div class="article-info"> <h3 class="article-title"><a href="/4e26ca3ebc0045c1/4dd4caae90a90237.html">单反机不拍时要关机吗</a></h3> <div class="article-meta"> <span>📅 10-14</span> <span>👁️ 6231</span> </div> </div> </div> <div class="article-cell"> <span class="category-badge">Bte365</span> <img src="/0.jpg" alt="直下式LED背光源和侧入式LED背光源的区别以及哪个好呢" class="article-image"> <div class="article-info"> <h3 class="article-title"><a href="/4e26ca3ebc0045c1/9c1a8346fa96d22b.html">直下式LED背光源和侧入式LED背光源的区别以及哪个好呢</a></h3> <div class="article-meta"> <span>📅 09-24</span> <span>👁️ 7883</span> </div> </div> </div> <div class="article-cell"> <span class="category-badge">365be是啥</span> <img src="/0.jpg" alt="淘宝恶意刷单怎么举报、投诉、处罚和申诉？什么时候消失？" class="article-image"> <div class="article-info"> <h3 class="article-title"><a href="/c481a5cdf3aa151d/7c318f32d7767152.html">淘宝恶意刷单怎么举报、投诉、处罚和申诉？什么时候消失？</a></h3> <div class="article-meta"> <span>📅 08-15</span> <span>👁️ 8972</span> </div> </div> </div> </div> </div> <div class="friend-links"> <h3>联盟站点</h3> <div class="friend-links-container"> <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node90.aizhantj.com:21233/tjjs/?k=1tjqoiqkcfv"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> </div> <footer> <div class="container"> <p class="copyright">Copyright © <span id="currentYear"></span> Bte365-Bet体育365提款要多久-365be是啥 All Rights Reserved.</p> </div> </footer> <script> // 自动获取当前年份 document.getElementById('currentYear').textContent = new Date().getFullYear(); </script> <script type='text/javascript' src='/api.js'></script> <script type='text/javascript' src='/tongji.js'></script> </body> </html>