如何用原生JavaScript实现点击切换按钮时禁用其他切换按钮

现有代码 #

HTML结构 #

<button id="gen" type="button" onchange='relasi("Gen")' > 1 </button>
<button id="imp" type="button" onchange='relasi("Imp")' > 2 </button>
<button id="agr" type="button" onchange='relasi("Agr")' > 4 </button>

注：原代码使用onchange事件无效，按钮点击需改用onclick，后续实现会修正这一点。

现有JavaScript代码 #

let togButton = false;

function relasi(type) {
  if(togButton = !togButton){   //用户点击按钮后值改变
       if(type === "Gen"){         // 禁用除Gen外的其他按钮
       }
       if(type === "Imp"){         // 禁用除Imp外的其他按钮
       }
       if(type === "Agr"){        // 禁用除Agr外的其他按钮
       }
  } else {      // 用户未点击或再次点击同一按钮
     // 启用所有按钮
  }
}

需求说明 #

按钮初始为未激活状态，点击后进入激活状态，此时禁用其他所有按钮，仅允许点击当前激活的按钮；再次点击该激活按钮，回到未激活状态，同时恢复所有按钮可用，循环切换。

实现代码 #

原变量togButton仅记录布尔值，无法区分当前激活的按钮类型，需调整为记录激活按钮标识。完整实现如下：

修正后的JavaScript代码 #

// 记录当前激活的按钮类型，初始null表示无激活按钮
let activeButton = null;

function relasi(type) {
  // 获取所有按钮元素
  const genBtn = document.getElementById('gen');
  const impBtn = document.getElementById('imp');
  const agrBtn = document.getElementById('agr');
  const allButtons = [genBtn, impBtn, agrBtn];

  // 点击的是已激活的按钮，取消激活并恢复所有按钮可用
  if (activeButton === type) {
    activeButton = null;
    allButtons.forEach(btn => btn.disabled = false);
  } else {
    // 激活当前按钮，禁用其他按钮
    activeButton = type;
    allButtons.forEach(btn => {
      // 按钮id为type的小写形式，匹配则保留可用，否则禁用
      btn.disabled = btn.id !== type.toLowerCase();
    });
  }
}

修正后的HTML结构 #

<button id="gen" type="button" onclick='relasi("Gen")' > 1 </button>
<button id="imp" type="button" onclick='relasi("Imp")' > 2 </button>
<button id="agr" type="button" onclick='relasi("Agr")' > 4 </button>

逻辑说明 #

1. activeButton变量专门记录当前激活的按钮类型，初始为null代表无激活状态；
2. 点击按钮时先判断是否为已激活按钮：
   • 若是则重置激活状态，启用所有按钮；
   • 若否则标记当前按钮为激活状态，遍历所有按钮，仅保留当前按钮可用，其余禁用；
3. 完全贴合需求实现循环切换与按钮禁用逻辑。

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