AJAX获取数据后，使用jQuery设置Razor循环渲染的复选框选中状态失败的问题咨询

看起来你的代码里有几个关键问题导致复选框选中不生效，我来一步步帮你修正：

1. 选择器的问题 #

你当前用的选择器 $("#editGroupsContainer input[class=group]") 是精确匹配class属性值，但你的复选框class是 group form-check-input，所以这个选择器根本选不到元素。应该改成更宽松的class选择器：

var objSelect = $("#editGroupsContainer input.group");
// 或者更精准的：$("#editGroupsContainer .group.form-check-input")

2. 设置选中状态的函数错误 #

你的setSelectedValue函数有三个核心问题：

• 循环时没有操作单个元素，而是一直操作整个复选框集合
• 使用attr设置checked状态是错误的，对于表单元素的状态（比如checked、disabled），jQuery推荐用prop方法来操作
• 没有判断当前复选框的value是否和你AJAX拿到的group值匹配，导致所有复选框都被选中（这显然不是你想要的）

修正后的函数应该是这样：

function setSelectedValue(selectObj, valueToSet) {
    // 遍历每个复选框
    selectObj.each(function() {
        // 对比当前复选框的value和目标值，匹配就设置选中
        if ($(this).val() === valueToSet) {
            $(this).prop("checked", true);
        }
    });
}

如果你的valueToSet是一个数组（需要选中多个复选框），可以改成：

function setSelectedValues(selectObj, valuesToSet) {
    selectObj.each(function() {
        var $checkbox = $(this);
        $checkbox.prop("checked", valuesToSet.includes($checkbox.val()));
    });
}

3. 确保AJAX数据返回后再执行设置 #

你需要把设置复选框的代码放在AJAX请求的success回调里，并且要确保模态框的DOM已经渲染完成。比如可以在AJAX成功获取数据后再打开模态框，或者监听模态框的shown.bs.modal事件（确保模态框完全显示后再操作DOM）。示例代码：

// 假设你的AJAX请求结构如下
$.ajax({
    url: "/your-api-endpoint",
    method: "GET",
    success: function(response) {
        // 假设response里的group就是你要选中的目标值
        var targetGroup = response.group;
        var objSelect = $("#editGroupsContainer input.group");
        
        // 调用设置函数
        setSelectedValue(objSelect, targetGroup);
        
        // 之后打开模态框
        $('#yourModalId').modal('show');
    },
    error: function() {
        console.error("获取数据失败");
    }
});

额外小建议 #

• 你的Razor代码里groupsIndex++看起来没有实际用途，可以考虑删掉
• 如果是先打开模态框再加载数据，建议监听模态框的显示事件来执行设置：

$('#yourModalId').on('shown.bs.modal', function() {
    // 在这里执行设置复选框的代码，确保DOM已就绪
    var objSelect = $("#editGroupsContainer input.group");
    setSelectedValue(objSelect, group); // group是AJAX拿到的目标值
});

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