如何设置input元素禁用且POST时保留SelectedPaymentType值？

问题根源 #

HTML标准规定，带有disabled属性的表单控件不会被包含在表单提交的数据中，这就是设置disabled后SelectedPaymentType值丢失的核心原因。

解决方案 #

方案一：隐藏字段配合禁用单选框

当单选框需要禁用且需提交其值时，添加一个绑定相同属性的隐藏输入框，在服务器端判断禁用状态时同步设置隐藏字段的值：

<!-- 禁用的单选框 -->
<input type="radio" 
       @(Model.IsradACHDisabled ? "disabled" : "") 
       asp-for="SelectedPaymentType" 
       id="radACH" 
       value="ACH" 
       @(Model.IsradACHDisabled ? "checked" : "") />ACH<br />

<!-- 禁用状态下通过隐藏字段提交值 -->
@if (Model.IsradACHDisabled)
{
    <input type="hidden" asp-for="SelectedPaymentType" value="ACH" />
}

方案二：ASP.NET Core标签助手+隐藏字段

使用asp-disabled标签助手简化禁用逻辑，同样配合隐藏字段保证值被提交：

<input type="radio" 
       asp-disabled="Model.IsradACHDisabled" 
       asp-for="SelectedPaymentType" 
       id="radACH" 
       value="ACH" />ACH<br />

@if (Model.IsradACHDisabled)
{
    <input type="hidden" asp-for="SelectedPaymentType" value="ACH" />
}

方案三：CSS+JS模拟禁用效果

不使用原生disabled属性，通过CSS让控件看起来禁用，用JS阻止交互，这样控件仍会提交数据：

<input type="radio" 
       asp-for="SelectedPaymentType" 
       id="radACH" 
       value="ACH" 
       class="@(Model.IsradACHDisabled ? "disabled-radio" : "")" />ACH<br />

<style>
.disabled-radio {
    opacity: 0.6;
    cursor: not-allowed;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.disabled-radio').forEach(radio => {
        radio.addEventListener('click', e => e.preventDefault());
    });
});
</script>

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