button.disabled = true 会原生阻断表单提交，不触发 click 和 submit 事件，且按钮的 name/value 不参与 POST；需用 input 事件实时校验并初始执行 check()；禁用仅为体验优化，后端必须重验权限与字段；禁用必须用原生 disabled 属性，不可仅靠 CSS。
button.disabled = true 时表单根本不会提交
只要 button[type="submit"] 被设为 disabled = true，点击它既不会触发自身的 click 事件，也不会触发表单的 submit 事件——浏览器压根不派发任何提交行为。这不是“拦截”，而是原生语义级阻断。
常见错误是：在按钮禁用后，还在 form.addEventListener('submit', ...) 里做校验，结果发现根本进不去回调。别浪费这个监听，它此时完全失效。
需要强调的是：disabled 状态下该按钮的 name 和 value（比如 <button type="submit" name="action" value="publish"></button>）**完全不会出现在 POST 数据中**。若业务依赖不同按钮传不同操作标识，禁用其中一个时，得靠隐藏域或 JS 动态改 input[type="hidden"] 来补位。
动态禁用必须用 input 事件，不是 onkeyup
onkeyup 只响应键盘松开，漏掉右键粘贴、拖拽文本、密码管理器填充、语音输入、撤销（Ctrl+Z）等所有非按键操作。用户明明填了内容，按钮却还是灰色，这是最常被吐槽的体验断点。
立即学习“前端免费学习笔记（深入）”；
正确做法是监听 input 事件，它覆盖所有值变更路径：
const input = document.getElementById('email');
const btn = document.getElementById('submitBtn');
const check = () => { btn.disabled = !input.value.trim(); };
input.addEventListener('input', check);
document.addEventListener('DOMContentLoaded', check); // 初始状态校验不能少
注意两点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须在
DOMContentLoaded后立即执行一次check()，否则预填充（如浏览器自动填充邮箱）会导致按钮初始状态错误 - 动态插入的按钮（如 Vue/React 渲染、AJAX 加载）要确保 DOM 已挂载，
document.getElementById返回非null再操作；别用setTimeout等“差不多了”的方案
禁用 ≠ 权限控制，后端必须重新校验
前端禁用按钮只是防误点，不是安全边界。用户可以轻松删掉 disabled 属性、手动构造请求、甚至绕过整个表单直接调 API。
所以，哪怕按钮灰了、字段 disabled 了、页面上根本没显示“删除”按钮，后端接口仍需强制校验：
- 当前用户是否有权限执行本次操作（例如：能否提交草稿、能否发布、能否修改他人订单）
- 提交的字段是否在权限范围内（例如：“编辑”角色不能改
status或created_at） - 敏感字段（如
is_admin、role_id）绝不能由前端传入，必须由后端根据 session/token 自动注入
表单里的 disabled 和 hidden 字段，对后端来说毫无意义——它只认请求体和身份凭证。
别用 CSS 模拟 disabled
写 style="pointer-events: none; opacity: 0.5;" 看似按钮点不动了，但问题一堆：
- Tab 键仍能聚焦，键盘用户卡在假禁用按钮上
- 表单提交时，它的
value依然会发出去 - 屏幕阅读器完全感知不到“已禁用”，违反可访问性要求
- 移动端可能穿透点击到下层元素
真正禁用，必须用原生 disabled 属性。CSS 只负责美化它的视觉状态，比如：
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
记住：禁用逻辑由属性驱动，样式只是副产品。混用 setAttribute('disabled', '') 和 el.disabled = false 还容易导致状态残留——统一用 JS 的 .disabled = true/false 最稳妥。
