html中无“文档禁用状态”，disabled仅适用于表单控件（如button、input等），对html、body、div等无效；禁用整页需遮罩层+手动处理焦点与事件，兼顾语义与可访问性。
HTML 里没有“文档禁用状态”这个概念，disabled 属性不能用在 、 或整个文档上 —— 它只对表单控件有效。
哪些元素能用 disabled？
只有可交互的表单元素支持 disabled：比如 <button></button>、<input>（除 type="hidden"）、<select></select>、<textarea></textarea>、<optgroup></optgroup>、<option></option>。给 <div>、<code><p></p>、<section></section> 加 disabled 属性完全无效，浏览器既不识别也不触发任何行为。
-
disabled是布尔属性，写成disabled或disabled=""效果一样 - 它会阻止元素获得焦点、响应点击/键盘事件，并让样式自动变灰（取决于 UA 样式）
- 被设为
disabled的表单控件，其值不会随表单提交发送
disabled 和 aria-disabled="true" 的区别
disabled 是原生语义，影响功能+可访问性；aria-disabled="true" 只是告诉屏幕阅读器“这个元素当前不可用”，但不阻止交互或聚焦 —— 它适合用在非表单元素（如 <button></button> 用 role="button" 模拟时），或需要保留视觉样式但禁用逻辑的场景。
- 真要禁用交互，优先用原生
disabled，别只靠 ARIA -
aria-disabled不会自动禁用鼠标/键盘事件，你得自己加pointer-events: none和tabindex="-1"配合 - 混用
disabled和aria-disabled可能导致可访问性冗余甚至冲突
想让整页“变灰禁用”，实际该怎么做？
没有标准 HTML 属性能“禁用整个文档”，常见做法是覆盖一层半透明遮罩 + 禁用所有可聚焦元素。这不是语义化方案，而是 UI 层面的模拟。
立即学习“前端免费学习笔记（深入）”；
- 用一个全屏
<div class="overlay"> 盖住页面，CSS 设 <code>pointer-events: none（否则遮罩本身会拦截焦点） - 手动给所有可聚焦元素（
button、input、a[href]、[tabindex]）加上tabindex="-1"并移除onclick等事件监听 - 更稳妥的做法是直接在 JS 中遍历并调用
.setAttribute('disabled', '')（仅对支持的元素）+.setAttribute('aria-disabled', 'true')（对其他元素） - 注意：动态添加的元素不会自动继承，必须重新处理
真正容易被忽略的是语义和行为的割裂 —— 你能让页面看起来“禁用了”，但若没同步处理键盘焦点流、屏幕阅读器通告、表单提交逻辑，用户（尤其辅助技术使用者）依然可能误操作或迷失。禁用不是加个属性就完事，得看谁在用、怎么用、用什么在用。
