嘿，我懂你要的效果了——每次点一个按钮，它就变灰禁用并显示「Selected」；再点另一个按钮时，之前被禁用的那个立刻恢复可用，每次只有当前点击的按钮处于禁用状态，对吧？

其实核心思路很简单：在处理当前点击按钮的禁用逻辑前，先把所有相关按钮的状态都重置为可用，这样就能保证每次只有刚点击的按钮是禁用状态。

我帮你修改了代码，用更简洁的方式实现这个功能，而且扩展性更强（以后加更多按钮也不用改JS）：

完整代码示例 #

<!-- HTML部分 -->
<button id="button1" class="action-btn">Button 1</button>
<button id="button2" class="action-btn">Button 2</button>
<button id="button3" class="action-btn">Button 3</button>
<p></p>

<!-- jQuery脚本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
  // 给所有带action-btn类的按钮绑定点击事件
  $(".action-btn").click(function () {
    // 第一步：重置所有按钮的状态：启用+恢复原文本
    $(".action-btn").each(function() {
      $(this).prop("disabled", false);
      // 根据按钮ID恢复原文本，比如button1对应"Button 1"
      $(this).text("Button " + $(this).attr("id").replace("button", ""));
    });

    // 第二步：处理当前点击的按钮：禁用+修改为Selected
    $(this).prop("disabled", true);
    $(this).text("Selected");

    // 更新提示文本
    const btnNum = $(this).attr("id").replace("button", "");
    $("p").text(`You have clicked on Button ${btnNum}`);
  });
});
</script>

代码说明 #

• 给所有按钮添加了统一的action-btn类，这样可以批量操作，不用给每个按钮单独写点击事件
• 点击任意按钮时，先通过each循环重置所有按钮：取消禁用状态，并且把文本恢复成原本的「Button X」
• 再单独设置当前点击的按钮为禁用，文本改成「Selected」
• 最后更新下方的提示文本，告诉用户点击了哪个按钮

这样操作后，你点击Button1，它会变成禁用的Selected；再点击Button3，Button1会自动恢复可用，Button3变成禁用的Selected，完全符合你的需求~

备注：内容来源于stack exchange，提问作者Eric Tum