单选按钮关联输入框提交问题：如何仅选中对应选项时提交值？

我明白你的问题啦——当用户切换到「No」单选按钮时，虽然隐藏了时间输入框，但它之前填写的值还是会被提交到后端控制器，这确实是前端表单里常见的小坑。下面给你几个简单有效的解决方案，结合你的现有代码来修改：

方案一：禁用/启用输入框（最直观的方式） #

HTML表单元素如果设置了disabled属性，提交表单时就不会被包含在请求中。我们可以在切换单选按钮时，同时控制输入框的禁用状态，还可以顺便清空已输入的值避免残留：

$('input[type="radio"]').click(function () {
  const timeInput = $("#CodeInitiatedTime");
  if ($(this).attr("id") === "CodeYes") {
    $("#time").show();
    timeInput.prop("disabled", false); // 启用输入框，允许提交
  }
  if ($(this).attr("id") === "CodeNo") {
    $("#time").hide();
    timeInput.prop("disabled", true); // 禁用输入框，阻止提交
    timeInput.val(""); // 可选：清空已输入的时间值
  }
});

补充：页面初始化状态处理 #

别忘了在页面加载完成后，根据默认选中的单选按钮初始化输入框状态，避免页面刚加载就出现异常：

$(document).ready(function() {
  const selectedRadio = $('input[name="CodeInitiated"]:checked');
  const timeInput = $("#CodeInitiatedTime");
  
  if (selectedRadio.attr("id") === "CodeNo") {
    $("#time").hide();
    timeInput.prop("disabled", true);
    timeInput.val("");
  }
});

方案二：动态修改输入框的name属性 #

表单元素只有带有name属性时，才会被提交到后端。我们可以在切换到「No」时移除输入框的name，切换回「Yes」时再恢复：

$('input[type="radio"]').click(function () {
  const timeInput = $("#CodeInitiatedTime");
  const inputName = "CodeInitiatedTime";
  
  if ($(this).attr("id") === "CodeYes") {
    $("#time").show();
    timeInput.attr("name", inputName); // 恢复name，允许提交
  }
  if ($(this).attr("id") === "CodeNo") {
    $("#time").hide();
    timeInput.removeAttr("name"); // 移除name，阻止提交
    timeInput.val(""); // 可选清空值
  }
});

同样需要在页面初始化时做对应处理，确保默认状态正确。

方案三：后端兜底校验（必不可少） #

不管前端做了多少控制，都有可能被绕过（比如用户手动修改DOM），所以后端一定要做校验：当CodeInitiated为false时，忽略CodeInitiatedTime的值，或者直接返回验证错误。

举个C#控制器的例子：

[HttpPost]
public IActionResult SubmitForm(YourFormModel model)
{
    // 校验逻辑：如果未启动Code，清空时间值或返回错误
    if (!model.CodeInitiated && model.CodeInitiatedTime != null)
    {
        model.CodeInitiatedTime = null;
        // 或者添加验证错误：
        // ModelState.AddModelError("CodeInitiatedTime", "未启动Code时无需填写时间");
        // if (!ModelState.IsValid) return View(model);
    }
    
    // 后续业务逻辑
    return RedirectToAction("Success");
}

总结 #

推荐你使用方案一+方案三的组合：前端通过禁用输入框提升用户体验，后端校验保证数据的正确性，双重保险避免问题。

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