Razor页面中label包裹单选按钮点击圆形区域无法选中如何修复

问题原因 #

你遇到的点击原生单选框无响应的问题，是由代码中div标签上的data-toggle="buttons"属性导致的。这个是Bootstrap的按钮组交互组件属性，它的设计逻辑是完全接管内置单选/复选框的状态更新，会拦截原生input元素的点击事件，仅响应外层label的点击触发状态变更。此时原生单选框未被隐藏，用户点击圆形区域时事件被拦截，自然无法同步选中状态到绑定的Model。

解决方案 #

方案1（推荐，符合Bootstrap组件设计规范）

给原生单选框添加隐藏属性，让用户看不到原生圆形按钮，整个label区域都可点击触发状态更新，Bootstrap会自动用label的激活样式标识选中状态，不影响表单值绑定：

<div class="btn-group" style="display:table; margin-top: 8px" data-toggle="buttons">
    <label class="btn btn-primary active" style="cursor:pointer;">
        @* 添加hidden类隐藏原生单选框 *@
        @Html.RadioButtonFor(m => m.Input.DrugClaimsConsent, true, new { @class = "hidden" })
        @localizer["Yes"]
    </label>
    <label class="btn btn-primary" style="cursor:pointer;">
        @Html.RadioButtonFor(m => m.Input.DrugClaimsConsent, false, new { @class = "hidden" })
        @localizer["No"]
    </label>
</div>

方案2（保留原生单选框显示）

如果需要保留原生圆形单选框的显示效果，直接去掉外层div的data-toggle="buttons"属性即可，移除事件拦截后，点击文本或原生单选框都可以正常更新绑定的Model状态：

@* 移除data-toggle="buttons"属性 *@
<div class="btn-group" style="display:table; margin-top: 8px">
    <label class="btn btn-primary active" style="cursor:pointer;">
        @Html.RadioButtonFor(m => m.Input.DrugClaimsConsent, true)
        @localizer["Yes"]
    </label>
    <label class="btn btn-primary" style="cursor:pointer;">
        @Html.RadioButtonFor(m => m.Input.DrugClaimsConsent, false)
        @localizer["No"]
    </label>
</div>

两种方案修改后，表单提交时DrugClaimsConsent属性都可以正常同步到后端。

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