当禁用html表单控件元素时，这意味着无法选择，单击，键入内容，也不再接受焦点。同样，默认情况下，浏览器将此类表单控件显示为灰色。
在本文中，您将了解如何使用html?disabled布尔值属性，如何使用javascript和禁用样式的表单控件对其进行切换。
摘要html?disabled布尔值属性禁用的字段集disabled?！=?readonly该aria-disabled属性disabled用js?切换状态射击事件设置disabled表单控件的样式“禁用”链接默认用户代理disabled样式html?disabled布尔值属性根据whatwg的说法，html?disabled属性受一组有限的html元素和新引入的与表单相关的自定义元素的支持：
buttonfieldsetoptgroupoptionselecttextareainput在本文中，我们将只关注基本的html元素，因此这是一个具有disabled属性的复选框输入：
<input type=checkbox id=check name=check disabled>
<label for=check>checkbox</label>请注意disabled，由于属性具有布尔逻辑，因此实际上并不需要为其设置值。因此，考虑到元素上存在布尔属性，以下所有值都是多余的，disabled无论如何结果都是一种行为：
disabled=disableddisabled=truedisabled=falsedisabled=whatever禁用的字段集html?fieldset元素用于对web表单中的多个控件进行分组。如果在disabled上设置了boolean?属性fieldset，则其中包含的所有表单控件也将被禁用。
这是一个示例，其中两个表单控件由于被禁用fieldset元素包装而被禁用。
<form>
<fieldset disabled>
<legend>disabled fieldset</legend>
<div>
<label for=name>name</label>
<input type=text id=name value=chris>
</div>
<div>
<label for=pwd>password</label>
<input type=password id=pwd value=topsecret>
</div>
</fieldset>
</form>disabled?！=?readonly与readonly表单控件相比，那些控件disabled不在表单内提交，因此在进行form验证时也将忽略它们。此外，disabled窗体控件也不是可聚焦的。
该aria-disabled属性如果您可以使用具有内置要求的语义和行为的本机html元素或属性，而不是重新使用元素并添加aria角色，状态或属性以使其可访问，则可以这样做。
从w3c
当使用html元素（例如表单控件）时，它本身支持disabledboolean属性，则不需要该aria-disabled属性。
史蒂夫·福克纳（steve faulkner）在残障/失禁用症属性上写了一篇不错的文章，因此您应该检查一下！
disabled用js?切换状态您可以利用以下事实：该.disabled属性返回布尔值，因此可以使用以下命令轻松地对其进行切换：
let el = document.queryselector(.myformcontrol);
el.disabled = !el.disabled;此外，除了经典removeattribute()和setattribute()方法外，您还可以使用toggleattribute()方法来切换disabled属性或任何其他布尔属性。尽管浏览器支持并不完美，但这可能会派上用场：
let el = document.queryselector(.myformcontrol);
el.toggleattribute(disabled);射击事件谈到禁用元素和javascript，jake archibald写了一篇有趣的文章，介绍了在禁用表单控件上触发事件，他在其中争论了pointer-events: none在所有:disabled元素上使用的必要性。
通过更好的浏览器对:is()（以前为，:any()或:matches()，@ selenit2指出的）css伪类的支持，以下是我们编写防弹css规则的方法，以防止在禁用的表单控件上发生交互和事件问题：
:disabled:is(
button,
optgroup,
option,
select,
textarea,
input
) {
pointer-events: none;
}fieldset上述规则中排除了该元素，以避免破坏title包装在其中的其他元素或属性。
设置disabled表单控件的样式有两种使用css选择禁用元素的方法：
旧的[disabled]属性选择器可用于具有disabled属性的任何html元素用户，并且实际上不必是表单控件元素。选择器级别3中:disabled引入的伪类是选择禁用元素的首选方法，因为它与仅支持该属性的html元素匹配。disabled“禁用”链接链接不是button，都不div是，span或其他任何形式。a元素仍然可以在不带href属性的情况下用作占位符链接。
如果该a元素没有href属性，则该元素表示一个占位符，用于否则可能会放置链接的位置。
从whatwg
我们知道:disabledcss伪类仅适用于本机支持disabled属性的表单控件，而a元素不在其中。
因此，以下css规则包含[disabled]属性选择器和.disabled类选择器。您知道，以防万一您需要，需要或必须使用它，<a disabled>...</a>而不是<a class=disabled>...</a>在特定情况下使用。
.disabled,
[disabled] {
pointer-events: none;
cursor: not-allowed;
opacity: .7;
}如果您想知道为什么还要禁用链接元素，那么我想到了一个场景，并且我确定您之前也确实迷失了这一点：
假设您在导航中有一个活动项目，显示它是该导航中的活动url。现在，除了应用的活动样式之外，您可能还希望阻止用户单击并刷新他所在的已经活动的页面。
默认用户代理disabled样式如果您想知道所有这些默认的禁用样式的来源，以下是最受欢迎的用户代理样式的列表，请随时关注：
铬mozillawebkit结论ie 11及以下版本不完全支持上的boolean?disabled属性fieldset。在将css?pointer-events: none声明添加到链接时，为了尝试禁用它，您还应该考虑应用tabindex=-1以便将其从制表符顺序中删除。没有充分的理由使用css?[disabled]属性选择器来支持:disabled伪类。也许需要ie6-ie8支持，这绝对不是一个好理由。与boolean?disabled属性相比，将aria-disabled设置为属性时，确实需要true或的值false。如果aria-disabled=false与disabled属性一起在表单控件上设置，则后者具有更高的特异性，?并且该aria-disabled属性将被忽略。