禁用复选框不触发change事件导致全选联动失效；全选框状态应基于可操作且已勾选的子项数量计算：全选（checkedcount===enabledcount）、半选（0

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

复选框禁用时全选联动失效的常见表现 禁用的 <input type="checkbox"> 不会触发 change 事件，所以常规的“监听全选框 → 同步子项状态”逻辑在子项被 disabled 时完全失效。你点全选框，禁用的子项依然保持原状；反过来，手动勾选/取消子项也不会影响全选框状态——这不是 bug，是浏览器标准行为。

全选框如何正确反映禁用子项的真实选中比例 全选框的状态（全选/半选/未选）应基于**可操作且已勾选的子项数量**计算，而非简单比对总数：

• 全选：checkedCount === enabledCount（所有启用项都已勾选）
• 半选：checkedCount > 0 && checkedCount
• 未选：checkedCount === 0

注意：禁用项的 checked 属性仍可读写，但它的值不影响 UI 显示，也不参与事件触发，仅作状态快照用。

JavaScript 中同步禁用项与全选框的典型写法 关键不是“绑定事件”，而是每次状态变更后**主动重算**：

function updateSelectAll() {
  const items = document.querySelectorAll('input[name="item"]:not(:disabled)');
  const checkedItems = document.querySelectorAll('input[name="item"]:not(:disabled):checked');
  const selectAll = document.getElementById('select-all');

  if (items.length === 0) {
    selectAll.checked = false;
    selectAll.indeterminate = false;
    return;
  }

  const checkedCount = checkedItems.length;
  const totalCount = items.length;

  selectAll.checked = checkedCount === totalCount;
  selectAll.indeterminate = checkedCount > 0 && checkedCount  item.checked = this.checked);
  updateSelectAll();
});

// 每个子项 change 后重新计算
document.querySelectorAll('input[name="item"]').forEach(item => {
  item.addEventListener('change', updateSelectAll);
});

容易忽略的 DOM 同步时机问题 如果子项是动态插入（比如通过 AJAX 或框架渲染），updateSelectAll() 必须在 DOM 真正就位后调用，否则 querySelectorAll 找不到新节点。不要依赖“页面加载完成”就一劳永逸：

• React/Vue 场景下，在组件 mounted 或 useEffect 里初始化监听，并确保销毁旧监听
• 纯 JS 动态添加时，插入后立即调用 updateSelectAll()，而不是等下一个 change 事件
• indeterminate 是只读属性，不能通过 HTML 属性设置，必须用 JS 赋值

禁用项本身不响应交互，但它的 checked 值可能被其他逻辑（比如表单还原、权限切换）悄悄修改——这种隐式状态变化最容易漏掉重算。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！