ASP.NET MVC中3个bool属性绑定单选按钮提交全为false如何解决

问题根因 #

你当前的写法存在两个核心冲突：

1. 原生单选按钮要实现互斥效果，必须设置相同的name属性，但你手动把三个按钮的name统一改为type，覆盖了asp-for原本自动生成的、和属性名匹配的name="A"/name="B"/name="C"。提交表单时只会传递type=true，服务端模型绑定找不到和A/B/C对应的提交值，三个属性就全部保留默认值false。
2. 如果保留asp-for生成的不同name，原生单选按钮就无法触发自带的互斥逻辑。

以下两种方案都符合仅使用3个单选按钮的要求：

方案1：微调ViewModel（推荐，无需额外JS逻辑） #

不需要修改前端控件数量，仅需给ViewModel新增一个接收单选选中值的属性即可：

1. 修改ViewModel定义：

public class ViewModel {
  public bool A { get; set; }
  public bool B { get; set; }
  public bool C { get; set; }
  // 新增属性用于接收单选选中项
  public string SelectedType { get; set; }
}

2. 修改单选按钮代码，不用手动覆盖name属性，asp-for统一绑定新增的SelectedType，value对应三个选项的标识：

<input asp-for="SelectedType" type="radio" value="A" id="A"/>
<label for="A">选项A</label>
<input asp-for="SelectedType" type="radio" value="B" id="B"/>
<label for="B">选项B</label>
<input asp-for="SelectedType" type="radio" value="C" id="C"/>
<label for="C">选项C</label>

3. 表单提交后在服务端给三个bool属性赋值即可：

if (model.SelectedType == nameof(model.A)) model.A = true;
else if (model.SelectedType == nameof(model.B)) model.B = true;
else if (model.SelectedType == nameof(model.C)) model.C = true;

方案2：不修改ViewModel，用JS实现互斥逻辑 #

如果不能调整ViewModel定义，可以保留asp-for生成的默认name属性，用JS实现单选互斥，不需要新增任何表单控件：

1. 单选按钮代码不手动设置name，保留asp-for的自动生成逻辑，统一加一个类名用于JS选中：

<input asp-for="A" type="radio" value="true" id="A" class="single-select"/>
<label for="A">选项A</label>
<input asp-for="B" type="radio" value="true" id="B" class="single-select"/>
<label for="B">选项B</label>
<input asp-for="C" type="radio" value="true" id="C" class="single-select"/>
<label for="C">选项C</label>

2. 加一段JS实现互斥逻辑（属于交互逻辑代码，不算新增表单控件）：

document.querySelectorAll('.single-select').forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.checked) {
      document.querySelectorAll('.single-select').forEach(r => {
        if (r !== this) r.checked = false;
      })
    }
  })
})

这种方式提交时，选中的对应属性会收到true值，未选中的属性因为没有对应表单值提交，会自动保留默认的false，完全符合需求。

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