disabled属性是布尔属性，存在即禁用，启用必须设为false或移除属性；推荐直接操作element.disabled = false，而非removeAttribute或错误赋值字符串。

disabled 属性不是“取消”，而是设为 false 或移除

HTML 中 disabled 是布尔属性，只要存在（哪怕值是 disabled="false"），元素就处于禁用状态。所以“动态取消”本质是：把 disabled 属性删掉，或把 DOM 元素的 disabled 属性设为 false —— 二者效果等价，但推荐后者。

常见错误是写 button.disabled = "false" 或 button.setAttribute("disabled", "false")，这反而会启用禁用逻辑（因为属性存在）。

• button.disabled = true → 禁用（推荐，直接操作属性）
• button.disabled = false → 启用（推荐）
• button.removeAttribute("disabled") → 启用（可行，但略冗余）
• button.setAttribute("disabled", "") 或 "disabled" → 禁用

用 JavaScript 控制时，必须确保 DOM 已加载

如果脚本在 <button> 标签前执行，document.getElementById() 会返回 null，后续赋值报错：Cannot set property 'disabled' of null。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 把 <script> 放在 </body> 前是最稳妥的做法
• 或用 DOMContentLoaded 事件包裹逻辑：

  document.addEventListener("DOMContentLoaded", () => {
    const btn = document.getElementById("myBtn");
    btn.disabled = false;
  });

• 避免在 head 中内联脚本直接操作未生成的按钮

React/Vue 等框架里别直接操作 disabled 属性

在 React 中硬写 btn.disabled = false 会绕过虚拟 DOM，导致状态不一致；Vue 的响应式系统也不感知这种手动 DOM 修改。

立即学习“前端免费学习笔记（深入）”；

• React：用 useState 控制 disabled prop：

  <button disabled={isSubmitting}>提交</button>

  ，然后 setIsSubmitting(false)
• Vue：绑定 :disabled="isProcessing"，再修改 isProcessing 数据
• 原生 JS + 框架混用时，优先走框架的数据流，而不是 getElementById().disabled = ...

注意表单提交时 disabled 元素的值不会被提交

这是 HTML 规范行为，和 JS 控制无关。哪怕你在点击前 1ms 设置 disabled = false，只要提交瞬间它为 true，该按钮的 name/value 就不会出现在表单数据中。

• 如果需要“视觉禁用但保留提交能力”，改用 pointer-events: none; opacity: 0.5; + 移除 disabled
• 若依赖 disabled 防重复提交，应在表单 submit 事件中设 disabled = true，并确保异步请求结束后再恢复
• 恢复前记得检查是否已卸载（如 React 组件销毁后更新 state 可能报错）

实际交互中，最易忽略的是「禁用状态与表单序列化行为的耦合」——它不是 JS bug，而是规范本身的设计，得从语义层面理解它为何存在。