初始禁用后启用的radio/checkbox选中值无法获取，求解决

问题根源 #

你当前的代码逻辑存在核心问题：遍历所有input元素时，同一name的单选按钮会被逐个处理。比如当你选中phone1typeMobile后，代码先给data["phoneType1"]赋值为选中值，但紧接着遍历到同name的未选中radio（phone1typeLandline）时，会因为!input.checked的判断，把data["phoneType1"]重新覆盖为空字符串，最终导致获取到的值为空。

复选框如果是同name的多选场景，也会出现类似覆盖问题——最后一个未选中的复选框会把之前选中项设置的值清空。

解决方案 #

修改代码逻辑，针对不同输入类型做差异化处理：

• 单选按钮：通过name定位到该组的选中项，直接获取其值，避免遍历同组所有元素
• 复选框：收集同name下所有选中的项，存为数组（单个复选框可调整为单个值）
• 其他输入类型保持原有逻辑，但避免重复覆盖同一name的值

修改后的代码示例 #

createIrecButton.addEventListener("click", function (event) {
  event.preventDefault();
  const myForm = document.getElementById("myForm");
  const data = {};

  // 1. 处理单选按钮
  const radioNames = [...new Set(myForm.querySelectorAll('input[type="radio"]').map(input => input.name))];
  radioNames.forEach(name => {
    const checkedRadio = myForm.querySelector(`input[name="${name}"]:checked`);
    data[name] = (checkedRadio && !checkedRadio.disabled) ? checkedRadio.value : "";
  });

  // 2. 处理复选框（支持同name多选，值存入数组）
  const checkboxNames = [...new Set(myForm.querySelectorAll('input[type="checkbox"]').map(input => input.name))];
  checkboxNames.forEach(name => {
    const checkedCheckboxes = myForm.querySelectorAll(`input[name="${name}"]:checked:not(:disabled)`);
    data[name] = checkedCheckboxes.length > 0 ? [...checkedCheckboxes].map(cb => cb.value) : [];
    // 若为单个复选框，可改为：data[name] = checkedCheckboxes.length > 0 ? checkedCheckboxes[0].value : "";
  });

  // 3. 处理其他输入类型（文本、选择框等，排除已处理的radio/checkbox）
  const otherInputs = myForm.querySelectorAll('input:not([type="radio"]):not([type="checkbox"]), select');
  otherInputs.forEach(input => {
    const name = input.name;
    if (!name) return;
    let value = "";
    if (input.tagName === "SELECT") {
      if (!input.disabled && input.selectedIndex !== -1) {
        value = input.options[input.selectedIndex].value;
      }
    } else {
      value = input.disabled ? "" : input.value;
    }
    data[name] = value;
  });

  // 查看处理后的结果
  console.log(data);
});

额外说明 #

• 单选按钮使用:checked伪类直接定位选中项，彻底避免同组元素的覆盖问题
• 复选框改为收集所有选中项存入数组，适配多选场景需求；单个复选框可自行调整返回格式
• 通过new Set对输入项的name去重，避免重复处理同一组元素
• 保留了对disabled状态的判断，确保只处理已启用的输入项

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