求助：两个button交替Disable与enable功能无法正常实现

嘿，我来帮你搞定这个按钮互锁的需求！这种点击后互相切换禁用状态的逻辑其实很容易实现，咱们先看正确的代码实现，再聊聊可能踩的坑：

原生JavaScript实现方案 #

首先是HTML结构，给两个按钮设置唯一ID方便获取：

<!-- 初始状态设置ButtonX启用、ButtonY禁用，符合首次点击的预期 -->
<button id="buttonX">Button X</button>
<button id="buttonY" disabled>Button Y</button>

然后是核心的JavaScript逻辑，给每个按钮绑定点击事件，切换彼此的禁用状态：

// 先获取两个按钮元素
const buttonX = document.getElementById('buttonX');
const buttonY = document.getElementById('buttonY');

// ButtonX的点击事件：禁用自己，启用ButtonY
buttonX.addEventListener('click', () => {
  buttonX.disabled = true;
  buttonY.disabled = false;
});

// ButtonY的点击事件：禁用自己，启用ButtonX
buttonY.addEventListener('click', () => {
  buttonY.disabled = true;
  buttonX.disabled = false;
});

常见问题排查（为什么你的代码没生效？） #

如果你的原有代码没实现效果，大概率是这几个原因：

• 元素获取错误：检查按钮的ID和JS里getElementById的参数是否完全一致，大小写、拼写都不能错
• 事件绑定时机不对：如果JS代码放在<head>里，DOM还没加载完成就去获取元素，会拿到null，导致事件绑定失败。解决方法是把JS代码放在<body>标签末尾，或者用DOMContentLoaded包裹：

  document.addEventListener('DOMContentLoaded', () => {
    // 上面的按钮事件绑定代码放在这里
  });
  

• 重复绑定事件：如果不小心多次调用addEventListener，会导致点击一次触发多次逻辑，可能出现状态混乱的情况

jQuery版本实现（如果用jQuery开发） #

要是你项目里用了jQuery，也可以这么写：

$(document).ready(() => {
  $('#buttonX').click(function() {
    $(this).prop('disabled', true);
    $('#buttonY').prop('disabled', false);
  });

  $('#buttonY').click(function() {
    $(this).prop('disabled', true);
    $('#buttonX').prop('disabled', false);
  });
});

这样就能完美实现你要的效果：点击ButtonX时它自己被禁用，ButtonY解锁；点击ButtonY时它自己禁用，ButtonX重新启用。

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