Blazor Checkbox开关使用疑问：禁用方式与选中值获取

你的实现方式并不是Blazor中使用Checkbox开关的常规做法，存在两处关键问题，下面逐一修正并说明：

1. 禁用Checkbox的正确方式 #

你通过字符串变量赋值"disabled"来禁用开关的做法是错误的。Blazor中控制表单元素的禁用状态，需要将disabled属性绑定到布尔类型变量，而非字符串。

2. 获取选中状态的正确方式 #

Checkbox的选中状态本质是布尔值（选中为true，未选中为false），应该通过@bind-checked指令实现双向绑定，这样在@code区块中直接访问绑定的变量就能实时获取当前选中状态。

修正后的完整代码 #

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<div class="form-check form-switch">
  <!-- 使用@bind-checked双向绑定选中状态，绑定disabled属性控制禁用 -->
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" 
         @bind-checked="isDarkMode" disabled="@isDisabled">
  <label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>

<!-- 实时显示选中状态和禁用状态 -->
<label>当前选中状态：@isDarkMode</label><br>
<label>当前禁用状态：@isDisabled</label>

@code{
    // 用于绑定选中状态的布尔变量
    private bool isDarkMode;
    // 用于控制禁用状态的布尔变量
    private bool isDisabled;

    protected override void OnInitialized()
    {
        // 初始化禁用状态为true（禁用开关）
        isDisabled = true;
        // 可选：初始化选中状态
        // isDarkMode = true;
    }
}

关键说明 #

• @bind-checked="isDarkMode"：实现选中状态与变量的双向同步，用户操作开关时变量会自动更新，变量修改时开关状态也会同步。
• disabled="@isDisabled"：通过布尔变量控制开关是否禁用，true为禁用，false为启用。
• 在@code中直接访问isDarkMode就能拿到当前开关的选中状态，无需额外处理。

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