本文讲解如何通过 javascript 正确禁用页面中多个 `
在 Web 开发中，为防止用户重复提交或触发关键操作（如“石头剪刀布”游戏中的出拳动作），常需在函数执行后立即禁用相关按钮。但一个常见误区是：试图直接对 document.querySelectorAll() 返回的 NodeList 设置 .disabled = true —— 这不仅无效，还会因类型不匹配导致静默失败。
问题根源在于：
- document.querySelectorAll('.btn') 选中的是 <div class="btn"> 容器，而 <div> 元素原生不支持 disabled 属性；
- NodeList 是类数组对象，不能像单个 DOM 元素那样直接赋值 disabled；
- 真正需要禁用的是 <button>（表单控件），它才具备可禁用语义。
✅ 正确做法是精准定位按钮元素，并遍历启用禁用：
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)；
- 不建议禁用 <div> 或其他非表单元素并依赖 CSS 模拟禁用效果（如 opacity: 0.5; pointer-events: none），因为这无法阻止键盘焦点与 Enter 键触发，存在可访问性（a11y）和用户体验风险；
- 如需禁用整个功能区，更健壮的方式是结合 pointer-events: none + aria-disabled="true" + 禁用内部按钮三重保障，但核心交互控制仍应落在 <button> 上；
- 建议为按钮添加 type="button"（避免意外提交表单）：
<button type="button"><img src="./images/rock-svgrepo-com.svg"></button>
至此，调用 endGame() 后，所有游戏按钮将真正变为不可点击、不可聚焦状态，确保逻辑安全与用户反馈一致。
