Blazor中如何阻止checkbox（或InputCheckBox）被取消勾选

你遇到的现象是Blazor的虚拟DOM差异检测逻辑导致的：当用户点击checkbox时，浏览器会默认先修改DOM上的checked状态为未勾选，再触发onchange事件。你在事件中把Visible设为true，但Blazor对比虚拟DOM时发现Visible的值和上一次渲染时完全一致，不会主动更新DOM上的checked属性，因此视觉上就会保持未勾选状态，和绑定值不同步。

方案1：阻止点击默认行为（推荐） #

直接阻止浏览器默认的checkbox状态切换行为，完全由绑定值控制显示状态，不需要额外处理状态同步，性能最优：

<input type="checkbox" checked=@Visible @onclick="HandleClick" @onclick:preventDefault />

@code
{
    public bool Visible { get; set; } = true;

    private void HandleClick()
    {
        // 此处写点击后需要执行的业务逻辑即可
        // Visible始终为true，checkbox会一直保持勾选状态，且不会被禁用
    }
}

方案2：强制触发两次渲染同步状态 #

如果需要保留默认事件触发逻辑，可以通过临时修改值触发两次DOM更新，强制把状态同步为勾选：

<input type="checkbox" checked=@Visible @onchange="HandleChange" />

@code
{
    public bool Visible { get; set; } = true;

    private async Task HandleChange(ChangeEventArgs args)
    {
        // 临时修改为相反值，触发第一次渲染
        Visible = !Visible;
        StateHasChanged();
        await Task.Delay(1);
        // 改回勾选状态，触发第二次渲染同步最终状态
        Visible = true;
        StateHasChanged();

        // 此处写其他业务逻辑
    }
}

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