如何简化多按钮互斥激活禁用的JavaScript代码？

核心优化思路 #

不用给每个按钮写重复的事件处理代码，只需要一套通用逻辑就能适配任意数量的按钮：

• 用querySelectorAll批量获取所有按钮，循环绑定同一个点击事件
• 用CSS类管理按钮状态，替代直接操作元素样式，更易维护
• 点击按钮时，遍历所有按钮：给当前点击的按钮设置"Done"状态并禁用，其他按钮恢复默认状态

优化后完整代码 #

HTML

<input type="button" class="BTN" value="Click Me!">
<input type="button" class="BTN" value="Click Me!">
<input type="button" class="BTN" value="Click Me!">
<!-- 随便加多少个按钮都不用改JS -->

CSS

* {
  padding: 0;
  margin: 0;
}

.BTN {
  background: blue;
  color: white;
  width: 100%;
  margin-top: 5px;
  padding: 10px;
  font-size: 20px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

/* 新增类管理禁用状态样式 */
.BTN.done {
  background: grey;
  cursor: not-allowed;
}

JavaScript

// 获取所有按钮元素
const buttons = document.querySelectorAll('.BTN');

// 给每个按钮绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', function() {
    // 遍历所有按钮，区分当前点击的和其他按钮
    buttons.forEach(btn => {
      if (btn === this) {
        // 当前点击的按钮：设置为Done、禁用、添加样式类
        btn.value = 'Done';
        btn.disabled = true; // 修复原代码拼写错误：disable → disabled
        btn.classList.add('done');
      } else {
        // 其他按钮：恢复默认文本、启用、移除样式类
        btn.value = 'Click Me!';
        btn.disabled = false;
        btn.classList.remove('done');
      }
    });
  });
});

关键说明 #

1. 修复了原代码里的属性拼写错误：disable是错误写法，原生DOM元素的禁用属性为disabled
2. 用CSS类.done管理禁用样式，后续修改样式只需调整CSS，无需改动JS
3. 新增按钮时，只要保留BTN类名，JS代码完全不需要修改，扩展性极强

内容的提问来源于stack exchange，提问作者user22057726