ASP.NET MVC中切换Select后Checkbox状态显示与属性不符问题

• 点击复选框触发change事件时，可正常调用接口修改数据库
• 切换下拉选择框时，虽调用了loadPackageFeatures函数，但之前手动修改的最后一个复选框仍显示勾选状态，查看元素属性却无checked属性

问题出在使用jQuery的attr()和removeAttr()操作复选框选中状态。这两个方法仅操作DOM元素的HTML属性，而复选框的选中状态属于浏览器维护的DOM元素内部状态（property）。用户手动点击复选框后，浏览器会更新内部状态，此时用attr()/removeAttr()无法同步这个状态，导致视觉显示与实际属性不一致。

将loadPackageFeatures函数中操作复选框的代码替换为prop()方法（专门用于操作DOM元素的状态属性）：

$(document).ready(function () {
    loadPackageFeatures();
})
$(document).on("change", "input", function () {
    editPackageFeatures()
})
$(document).on("change", "select", function () {
    loadPackageFeatures();
})

function loadPackageFeatures() {
     var PackageId = "@Model.PackageId";
    let typeid = $("#typeId").find(":selected").val()
    $.ajax(
        {
            type: "POST",
            url: '@Url.Action("GetCheckedFeatures","Home")',
            data: {
                Id: PackageId,
                PkgType: typeid,
            },
            traditional: true,
            success: function (data, status, xhr) {
                var CheckedPackageFeaturesIds = data.PackageFeaturesIds
                $('input[type=checkbox]').each(function () {
                    var currentValue = this.value * 1
                    if (CheckedPackageFeaturesIds.indexOf(currentValue) !== -1) {
                        $(this).prop('checked', true);
                    }
                    else {
                        $(this).prop('checked', false);
                    }
                })
            },
        }
    );
}

function editPackageFeatures() {
     var PackageId = "@Model.PackageId";
    let typeid = $("#typeId").find(":selected").val()
    let selectedFeatures = []
    $('input[type=checkbox]:checked').each(function () {
        selectedFeatures.push($(this).val());
    })

    $.ajax(
        {
            type: "POST",
            url: '@Url.Action("EditPackageFeatures", "Home")',
            data: {
                PackageId: PackageId,
                PlanType: typeid,
                PackageFeaturesIds: selectedFeatures
            },
            traditional: true,
            success: function (data, status, xhr) {
                
            },
        }
    );
}

• prop()方法用于操作DOM元素的动态状态属性（如checked、disabled），能同步浏览器内部维护的状态
• attr()仅用于操作HTML标签上初始定义的静态属性，不适合处理用户交互后的动态状态变更

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