Blazor Server问题：勾选新复选框时旧复选框无法自动取消勾选

问题根源 #

你当前的所有复选框都绑定到同一个valueChanged布尔变量，导致所有复选框共享同一状态，所以会同时选中或取消。要实现单选效果，需要基于选中的用户来单独控制每个复选框的状态。

修正步骤 #

• 移除多余的valueChanged变量，直接用selectedUser跟踪选中对象
• 每个复选框的选中状态由当前条目是否等于selectedUser动态判断
• 更新点击逻辑：点击已选中的用户则取消选中，点击新用户则切换选中对象
• 修复表格渲染条件：原代码仅在选中用户后才显示表格，改为判断用户列表是否存在

修正后的Razor组件代码 #

@if(User != null && User.Any()){
    <table>
        @foreach (var item in User)
        {
            <tr>
                <td>
                    <input type="checkbox" 
                           checked="@(item == selectedUser)" 
                           @onclick="()=>ToggleProfile(item)"> 
                    @item.CarestaffId 
                </td>
                <td>@item.FirstName @item.MiddleInitial. @item.LastName</td>
                <td>@item.Title</td>
                <td>@item.Status</td>
            </tr>
        }
    </table>
}

<!-- 用户资料展示区域 -->
@if(!DisplayProfile && selectedUser != null){
    <div>
        <h3>@selectedUser.FirstName @selectedUser.LastName 的资料</h3>
        <!-- 这里添加用户详细信息展示内容 -->
    </div>
}

修正后的C#代码 #

// 控制资料区域显示/隐藏
private bool DisplayProfile { get; set; } = true;

// 跟踪选中的用户
private User selectedUser;

private void ToggleProfile(User user)
{
    if(selectedUser == user)
    {
        // 点击已选中的用户，取消选择
        selectedUser = null;
        DisplayProfile = true;
    }
    else
    {
        // 选择新用户
        selectedUser = user;
        DisplayProfile = false;
    }
}

关键说明 #

• 每个复选框通过checked="@(item == selectedUser)"独立控制状态，确保只有选中用户的复选框处于勾选状态
• ToggleProfile方法处理单选逻辑，支持取消已选中的用户
• 表格渲染条件改为检查用户列表是否有效，确保页面加载时就能显示用户列表

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