如何在Blazor中实现仅勾选隐私政策复选框时才启用提交按钮

实现方案 #

Blazor是数据驱动UI的框架，不需要手动操作DOM修改按钮状态，只需要通过字段绑定状态即可，完整实现代码如下：

@page "/privacysubmit"

<!-- 提交按钮：未勾选隐私政策时默认禁用 -->
<button type="submit" disabled="@(!IsAgreedPrivacy)">提交</button>

<!-- 隐私政策勾选框，双向绑定状态字段 -->
<div>
    <input type="checkbox" @bind="IsAgreedPrivacy" id="privacyCheck" />
    <label for="privacyCheck">我已阅读并同意隐私政策</label>
</div>

@code {
    // 状态字段：默认未勾选隐私政策
    private bool IsAgreedPrivacy { get; set; } = false;
}

原理解释 #

• 我们定义了布尔类型的状态字段IsAgreedPrivacy，默认值为false，对应初始未勾选的状态
• 复选框通过@bind做双向绑定，用户勾选/取消勾选的操作会自动同步到IsAgreedPrivacy的值，不需要手动编写点击事件
• 提交按钮的disabled属性绑定!IsAgreedPrivacy：
  • 初始状态IsAgreedPrivacy = false，!IsAgreedPrivacy = true，按钮默认禁用
  • 用户勾选后IsAgreedPrivacy = true，!IsAgreedPrivacy = false，按钮自动启用

你之前的测试代码存在语法错误，且用了直接操作DOM的思路，不符合Blazor的数据驱动开发逻辑，直接用上面的绑定方案即可实现需求。

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