本文讲解如何通过 javascript 正确禁用页面中多个 `` 元素（而非其父容器），解决因误操作 `nodelist` 导致禁用失效的问题，并提供可直接运行的代码示例与关键注意事项。

在 Web 开发中，为防止用户重复提交或触发关键操作（如“石头剪刀布”游戏中的出拳动作），常需在函数执行后立即禁用相关按钮。但一个常见误区是：试图直接对 document.querySelectorAll() 返回的 NodeList 设置 .disabled = true —— 这不仅无效，还会因类型不匹配导致静默失败。

问题根源在于：

• document.querySelectorAll('.btn') 选中的是
  容器，而

  元素原生不支持 disabled 属性；
• NodeList 是类数组对象，不能像单个 DOM 元素那样直接赋值 disabled；
• 真正需要禁用的是 （表单控件），它才具备可禁用语义。

✅ 正确做法是精准定位按钮元素，并遍历启用禁用：


Blender Geometry Nodes Script Generator
生成Blender Python (bpy)脚本，该脚本使用node_groups API和GeometryNodeTree接口程序化地创建几何节点修改器树，用于参数化3D资产生成。
下载

function endGame() {
  // ✅ 正确选择：所有位于 .container 内的 button 元素
  const buttons = document.querySelectorAll('.container button');

  // ✅ 遍历每个 button 并设置 disabled 属性
  buttons.forEach(button => {
    button.disabled = true;
  });

  console.log('所有按钮已禁用');
}

? 补充说明与最佳实践：

• 若需后续重新启用，只需执行 buttons.forEach(btn => btn.disabled = false)；
• 不建议禁用
  或其他非表单元素并依赖 CSS 模拟禁用效果（如 opacity: 0.5; pointer-events: none），因为这无法阻止键盘焦点与 Enter 键触发，存在可访问性（a11y）和用户体验风险；
• 如需禁用整个功能区，更健壮的方式是结合 pointer-events: none + aria-disabled="true" + 禁用内部按钮三重保障，但核心交互控制仍应落在 上；
• 建议为按钮添加 type="button"（避免意外提交表单）：

  <button type="button"><img  src="./images/rock-svgrepo-com.svg" alt="如何正确禁用多个按钮元素以防止重复点击" ></button>

至此，调用 endGame() 后，所有游戏按钮将真正变为不可点击、不可聚焦状态，确保逻辑安全与用户反馈一致。