如何让MudBlazor复选框实现单选框的互斥功能？

问题分析 #

你的代码存在两个核心问题：

1. 取消勾选复选框时，未同步更新另一个复选框的状态，导致可能出现双未选的情况，不符合单选互斥的要求。
2. 额外维护_yesChecked和_noChecked两个私有变量，与Model.GxpRelevant的同步逻辑冗余，容易引发状态不一致。

解决方案1：修正原有逻辑 #

直接在复选框的状态变更事件中强制同步两个变量的互斥关系，确保始终只有一个复选框被选中：

修改后的Razor代码 #

<div class="form-check form-check-inline me-4 radio-print">                           
    <MudCheckBox Label="Ja" T="bool" Checked="@_yesChecked" CheckedChanged="OnYesCheckedChanged" Disabled="@IsReadOnly" />                        
</div>                           
<div class="form-check form-check-inline radio-print">                           
    <MudCheckBox Label="Nein" T="bool" Checked="@_noChecked" CheckedChanged="OnNoCheckedChanged" Disabled="@IsReadOnly" />                         
</div>

修改后的@code部分 #

[Parameter]
public Request? Model { get; set; }
[Parameter]
public EventCallback<Request> EvtChanged { get; set; }

private bool _yesChecked;
private bool _noChecked;

protected override void OnInitialized()
{
    _yesChecked = Model!.GxpRelevant;
    _noChecked = !Model!.GxpRelevant;
}

private void OnYesCheckedChanged(bool value)
{
    // 强制同步互斥状态
    _yesChecked = value;
    _noChecked = !value;
    
    Model!.GxpRelevant = _yesChecked;
    EvtChanged.InvokeAsync(Model);
}

private void OnNoCheckedChanged(bool value)
{
    // 强制同步互斥状态
    _noChecked = value;
    _yesChecked = !value;
    
    Model!.GxpRelevant = !_noChecked;
    EvtChanged.InvokeAsync(Model);
}

解决方案2：简化逻辑，直接绑定Model属性 #

去掉冗余的私有变量，直接将复选框与Model.GxpRelevant及其反向值绑定，减少状态同步的复杂度：

修改后的Razor代码 #

<div class="form-check form-check-inline me-4 radio-print">                           
    <MudCheckBox Label="Ja" T="bool" Checked="@Model.GxpRelevant" CheckedChanged="OnYesCheckedChanged" Disabled="@IsReadOnly" />                        
</div>                           
<div class="form-check form-check-inline radio-print">                           
    <MudCheckBox Label="Nein" T="bool" Checked="@(!Model.GxpRelevant)" CheckedChanged="OnNoCheckedChanged" Disabled="@IsReadOnly" />                         
</div>

修改后的@code部分 #

[Parameter]
public Request? Model { get; set; }
[Parameter]
public EventCallback<Request> EvtChanged { get; set; }

protected override void OnInitialized()
{
    // 无需维护额外变量，直接使用Model的属性
}

private void OnYesCheckedChanged(bool value)
{
    Model!.GxpRelevant = value;
    EvtChanged.InvokeAsync(Model);
}

private void OnNoCheckedChanged(bool value)
{
    Model!.GxpRelevant = !value;
    EvtChanged.InvokeAsync(Model);
}

额外说明 #

如果需要强制用户必须选择其中一个（禁止双未选），可以在事件处理中增加逻辑：当用户取消勾选当前复选框时，自动选中另一个。例如修改OnYesCheckedChanged：

private void OnYesCheckedChanged(bool value)
{
    // 强制至少选中一个
    Model!.GxpRelevant = value || !_noChecked;
    _yesChecked = Model.GxpRelevant;
    _noChecked = !Model.GxpRelevant;
    
    EvtChanged.InvokeAsync(Model);
}

内容的提问来源于stack exchange，提问作者Anduel Karamani