ASP.NET如何防止复选框列表点击时无文本框值也启用提交按钮

你当前的CheckCheck()函数仅校验了复选框选中数量，未加入文本框非空判断逻辑，因此只要选中的复选框数量≤2，无论文本框是否有输入，都会直接启用提交按钮。此外还存在两个隐藏问题：

1. check()函数仅处理了文本框有值的情况，未处理用户输入后又清空文本的回退逻辑
2. check()函数中硬写document.getElementById("btnSubmit")，ASP.NET服务端控件渲染后ID会变化，大概率会出现找不到元素的异常

1. 新增通用非空校验方法 #

先提取文本框非空校验逻辑，避免重复代码：

// 校验核心文本框是否有有效输入
function isTextValid() {
  var idCard = document.getElementById('<%=IDCard.ClientID%>');
  return idCard.value.trim() !== "";
}

2. 修改CheckCheck()函数 #

加入文本框校验判断，文本框为空时直接禁用按钮：

function CheckCheck() {
  var chkBoxList = document.getElementById('<%=CheckBoxList1.ClientID %>');
  var chkBoxCount = chkBoxList.getElementsByTagName("input");
  var btn = document.getElementById('<%=btnSubmit.ClientID %>');
  // 先判断文本框是否有值，无值直接禁用按钮
  if (!isTextValid()) {
    btn.disabled = true;
    return;
  }
  var tot = 0;
  for (var i = 0; i < chkBoxCount.length; i++) {
    if (chkBoxCount[i].checked) {
      tot++;
    }
  }
  if (tot > 2) {
    alert('You can only pick 2 games');
    btn.disabled = true;
  } else {
    btn.disabled = false;
  }
}

3. 补全check()函数的空值处理逻辑 #

function check(obj) {
  var btn = document.getElementById('<%=btnSubmit.ClientID%>');
  var nickname = document.getElementById('<%=Nickname.ClientID%>');
  var chkControls = document.getElementById("<%=CheckBoxList1.ClientID%>").getElementsByTagName("input");
  if (obj.value.trim() !== "") {
    nickname.disabled = false;
    for (var i = 0; i < chkControls.length; i++) {
      chkControls[i].disabled = false;
    }
    // 文本框有值时再调用一次复选框校验，同步按钮状态
    CheckCheck();
  } else {
    // 文本框清空时恢复禁用状态
    nickname.disabled = true;
    for (var i = 0; i < chkControls.length; i++) {
      chkControls[i].disabled = true;
      chkControls[i].checked = false; // 可选：清空已选选项
    }
    btn.disabled = true;
  }
}

原来的disableBtn()函数逻辑无需修改，控件的触发绑定逻辑也不需要改动，修复后即可符合预期：文本框为空时无论怎么操作复选框，提交按钮都会保持禁用状态。

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