包裹在标签中时无法 select Razor 单选按钮

Question

在我的 Razor 页面中，我有一个标签环绕着一个单选按钮。当我单击标签部分时，说“是”一词，收音机被选中并显示为已填充。当我点击收音机部分时，No 旁边的圆圈没有任何反应。

有人可以建议如何修复此代码，以便在直接单击单选按钮圆圈时模型会更改状态吗？

public class InputModel
{
    [Required(ErrorMessage = "Validate.ThisFieldIsRequired")]
    public bool? DrugClaimsConsent { get; set; } = null;
}

<form asp-page-handler="Confirmation" asp-route-returnUrl="@Model.ReturnUrl" method="post">
    <div class="btn-group" style="display:table; margin-top: 8px" data-toggle="buttons">
        <label class="btn btn-primary active" style="cursor:pointer;">
            @Html.RadioButtonFor(m => m.Input.DrugClaimsConsent, true)
            @localizer["Yes"]
        </label>
        <label class="btn btn-primary" style="cursor:pointer;">
            @Html.RadioButtonFor(m => m.Input.DrugClaimsConsent, false)
            @localizer["No"]
        </label>
    </div>
    <div>
        <span asp-validation-for="Input.DrugClaimsConsent" class="text-danger"></span>
    </div>

    <button type="submit" class="btn btn-primary">@localizer["Verify"]</button>
</form>

Answer 1

尝试删除 data-toggle="buttons"。

<div class="btn-group" style="display:table; margin-top: 8px">
    ...
</div>

结果：

包裹在标签中时无法 select Razor 单选按钮

Cannot select Razor Radio Button when wrapped in a Label

c#

asp.net-core

razor

radio-button

razor-pages