如何让Blazor Checkbox的Label可点击

你的代码里存在参数绑定错误：InputCheckbox组件的@bind-id是错误用法，它的Id是单向绑定参数，不需要@bind-前缀；同理@bind-name也应改为Name参数。浏览器要求label的for属性必须和input的id完全匹配才能触发关联，错误的绑定会导致input的id未正确生成，所以点击label无法触发复选框状态切换。

修正方案1：正确关联Id与for属性 #

<div class="form-group">
    <InputCheckbox Id="@claim.ID" Name="@claim.ID" @bind-Value="@claim.Selected"></InputCheckbox>
    <label for="@claim.ID" class="pb-2">@claim.ToString()</label>
</div>

修正后，InputCheckbox会生成带有正确id的input元素，label的for与该id对应，点击标签即可触发复选框选中状态切换。

修正方案2：用label包裹InputCheckbox #

更简洁的方式是直接将InputCheckbox嵌套在label内部，无需依赖id关联，浏览器默认会自动关联内部的表单控件：

<div class="form-group">
    <label class="pb-2">
        <InputCheckbox @bind-Value="@claim.Selected"></InputCheckbox>
        @claim.ToString()
    </label>
</div>

这种方式避免了id重复或绑定错误的问题，推荐使用。

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