ASP.NET MVC双Checkbox切换后值无法正确提交问题求解

问题根源 #

核心问题在于：互斥逻辑仅修改了UI显示，提交时未正确获取当前选中的Checkbox值；另外用attr操作checked状态会导致状态不同步，因为attr读取的是DOM初始属性，而非实时状态。

修复步骤（基于retaindtuff-checkbox类/name） #

1. 规范HTML结构

给两个Checkbox统一加上retaindtuff-checkbox类，明确设置value和匹配后台接口的参数名：

<input type="checkbox" class="retaindtuff-checkbox" name="ApprovalStatus" value="true" id="YesCheckbox"> Yes
<input type="checkbox" class="retaindtuff-checkbox" name="ApprovalStatus" value="false" id="NoCheckbox"> No
<button id="ApproveBtn">Approve</button>

2. 修正互斥逻辑（用prop操作实时状态）

替换原有互斥代码，确保点击时同步更新选中状态：

// 双Checkbox互斥逻辑
$('.retaindtuff-checkbox').on('click', function() {
    // 取消同组其他Checkbox的选中状态
    $('.retaindtuff-checkbox').not(this).prop('checked', false);
    // 强制当前Checkbox为选中状态，避免点击时的状态异常
    $(this).prop('checked', true);
});

3. 修复提交时的取值逻辑

提交时主动获取当前选中的Checkbox值，而非依赖初始值或错误的属性读取：

// 提交按钮点击事件
$('#ApproveBtn').on('click', function() {
    // 用:checked筛选器直接定位当前选中项
    var selectedValue = $('.retaindtuff-checkbox:checked').val();
    // 兜底处理：若未选中（互斥逻辑下基本不会出现），默认设为false
    var approvalStatus = selectedValue ? (selectedValue === 'true') : false;

    // 调用后台ApprovalIndex接口
    $.ajax({
        url: '/YourController/ApprovalIndex', // 替换为你的实际控制器路径
        type: 'POST',
        data: { ApprovalStatus: approvalStatus }, // 匹配后台接口参数名
        success: function(res) {
            console.log('提交成功:', res);
            // 这里可添加成功后的页面逻辑，比如提示、跳转
        },
        error: function(xhr) {
            console.error('提交失败:', xhr.responseText);
        }
    });
});

4. 初始化默认选中状态（可选）

若需要默认选中某一项，在页面加载完成后设置：

$(document).ready(function() {
    // 默认选中No（对应false）
    $('#NoCheckbox').prop('checked', true);
});

关键注意事项 #

• 必须用prop('checked')操作选中状态，而非attr('checked')——前者对应DOM实时状态，后者仅读取初始HTML属性。
• 提交时一定要用:checked筛选器获取当前选中项，避免取到旧值或错误值。

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