至少一个复选框选中时启用按钮功能异常排查

你的问题根源在于循环里的判断逻辑有误：每次遍历到未选中的复选框时，你都会强制把按钮设为禁用，这会直接覆盖之前已经设置的激活状态。举个例子：当你选中第一个复选框时，按钮被设为可用，但接着遍历到第二个未选中的复选框，代码又把按钮改回禁用了——这就是为什么只有最后一个复选框选中时，按钮才能保持激活。

修复后的代码 #

JavaScript 部分

function chose(){ 
  var txt=""; 
  var checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
  // 默认标记为“无复选框选中”
  let hasChecked = false;
  
  for(var i=0;i<checkboxes.length;i++){ 
    if(checkboxes[i].checked){ 
      hasChecked = true; // 只要有一个选中，就标记为true
      txt = txt + checkboxes[i].value + " "; 
    } 
  }
  
  // 根据标记设置按钮状态：无选中则禁用，反之激活
  document.getElementById("btn").disabled = !hasChecked;
  var result=document.getElementById("result"); 
  result.innerHTML=txt; 
} 

HTML 部分（补充了缺失的结果展示元素）

<form action="" method="GET"> 
  <label for="user">Name</label> 
  <input type="text" name="username" id="user" value="" placeholder="Input name"> 
  <input type="button" name="" value="Send" id="btn" disabled="true" onclick="chose()"> 
  IceCream:<input type="checkbox" name="one" id="param_1" value="IceCream" onchange="chose()"> 
  Chocolate:<input type="checkbox" name="one" id="param_2" value="Chocolate" onchange="chose()"> 
</form>
<div id="result"></div> <!-- 原代码引用了该元素但未在HTML中定义，补充后结果才能正常显示 -->

逻辑说明 #

1. 先初始化hasChecked为false，默认没有复选框被选中
2. 遍历所有复选框，只要发现任意一个被选中，就将hasChecked改为true，同时收集选中的选项值
3. 遍历结束后，根据hasChecked的最终值设置按钮状态：!hasChecked表示“如果没有选中的复选框，就禁用按钮”，反之则激活
4. 额外补充：原代码里引用了result元素但HTML中未定义，所以添加了<div id="result"></div>保证功能完整

如果想让代码更简洁，还可以用ES6的some方法替代循环：

function chose(){ 
  var txt=""; 
  var checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
  // 一行判断是否有至少一个复选框被选中
  const hasChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
  
  // 收集选中的值
  checkboxes.forEach(checkbox => {
    if(checkbox.checked) txt += checkbox.value + " ";
  });
  
  document.getElementById("btn").disabled = !hasChecked;
  document.getElementById("result").innerHTML=txt; 
} 

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