HTML双按钮切换禁用/启用状态的JavaScript函数实现需求

没问题，我帮你搞定这个按钮切换的功能！核心就是操作按钮的disabled属性和value属性，下面给你两种实现方式，你可以按需选择：

方案一：使用两个独立函数（符合你的需求） #

直接完善你提到的两个函数，逻辑直白清晰：

<form> 
  <input type="button" id="button1" value="Clickable" onClick="switchButton()"> 
  <input type="button" id="button2" value="Not Clickable" onClick="switchButton2()" disabled="true"> 
</form>

<script>
function switchButton() {
  // 获取两个按钮元素
  const btn1 = document.getElementById('button1');
  const btn2 = document.getElementById('button2');
  
  // 禁用button1并修改文本
  btn1.disabled = true;
  btn1.value = "Not Clickable";
  
  // 启用button2并修改文本
  btn2.disabled = false;
  btn2.value = "Clickable";
}

function switchButton2() {
  const btn1 = document.getElementById('button1');
  const btn2 = document.getElementById('button2');
  
  // 反向操作：启用button1，禁用button2
  btn1.disabled = false;
  btn1.value = "Clickable";
  
  btn2.disabled = true;
  btn2.value = "Not Clickable";
}
</script>

方案二：使用通用函数（更简洁优雅） #

如果不想写重复代码，一个通用函数就能搞定所有逻辑，还能方便后续扩展：

<form> 
  <input type="button" id="button1" value="Clickable" onClick="toggleButtons(this)"> 
  <input type="button" id="button2" value="Not Clickable" onClick="toggleButtons(this)" disabled="true"> 
</form>

<script>
function toggleButtons(clickedBtn) {
  const btn1 = document.getElementById('button1');
  const btn2 = document.getElementById('button2');
  
  // 根据点击的按钮判断执行哪套切换逻辑
  if (clickedBtn.id === 'button1') {
    btn1.disabled = true;
    btn1.value = "Not Clickable";
    btn2.disabled = false;
    btn2.value = "Clickable";
  } else {
    btn1.disabled = false;
    btn1.value = "Clickable";
    btn2.disabled = true;
    btn2.value = "Not Clickable";
  }
}
</script>

关键知识点说明 #

• document.getElementById()：通过ID快速定位到DOM元素，这是操作页面元素最常用的方法之一
• disabled属性：布尔值，true表示禁用按钮，false表示启用按钮
• value属性：修改按钮上显示的文本内容

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