勾选复选框后提交按钮无法启用的问题求助

存在的问题 #

你的代码存在两处核心错误，导致功能无法生效：

• 变量名拼写错误：你定义存储复选框集合的变量名为checkeds，但在for循环判断遍历长度时，使用了从未定义的变量marcados，这会直接抛出JS报错，循环逻辑完全不会执行，勾选数量统计自然失效。
• 事件绑定位置错误：你将统计逻辑函数EnableButton绑定在了初始为禁用状态的提交按钮的onclick事件上，按钮禁用时无法响应点击事件，函数永远不会被触发，不可能动态修改按钮的禁用状态。正确的绑定对象应该是所有复选框的change事件，每次用户勾选/取消勾选时就触发统计逻辑，动态调整按钮状态。

修复后的代码 #

你可以直接替换原有JS逻辑，不需要修改HTML结构：

// 页面加载完成后批量给复选框绑定事件
window.addEventListener('load', () => {
  const foodCheckboxes = document.querySelectorAll('#tblFoods input[type="checkbox"]');
  foodCheckboxes.forEach(box => {
    box.addEventListener('change', updateSubmitBtnStatus);
  });
});

// 统计勾选数量，更新提交按钮状态
function updateSubmitBtnStatus() {
  const checkedNum = document.querySelectorAll('#tblFoods input[type="checkbox"]:checked').length;
  document.getElementById('mybtn').disabled = checkedNum < 2;
}

修改后逻辑运行流程为：每次用户操作任意菜品复选框，就会自动统计当前已勾选的选项数量，大于等于2时自动启用提交按钮，不足2个时自动禁用按钮，完全匹配需求。

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