无法在 Razor 页面中选择单选按钮

Posted 2023-03-27

【中文标题】无法在 Razor 页面中选择单选按钮

【英文标题】：Can't select a Radio button in a Razor page

【发布时间】：2020-02-25 17:29:35

【问题描述】：

我有一个带有 2 个单选按钮的剃须刀页面。但我无法检查其中之一...

<div class="custom-control custom-radio">
    <input type="radio" asp-for="@Model.ActionNeeded" value="Yes" class="custom-control-input"  name="radio-stacked" required>
    <label class="custom-control-label">Yes</label>
</div>
<div class="custom-control custom-radio mb-3">
    <input type="radio" asp-for="@Model.ActionNeeded" value="No" class="custom-control-input"  name="radio-stacked" required>
    <label class="custom-control-label">No</label>
</div>

我错过了什么？这是一个简单的事情，但不能让它工作......

【问题讨论】：

您的收音机没有值，添加一个值，看看您现在是否可以选择它们。

我认为这是一个 CSS 问题。您的标签位于其他 div 下方或被其他 div 覆盖。检查laber或radio的css。

它是从引导网站复制的

asp-for="@Model.ActionNeeded" 正在为两个无线电生成相同的 ID，为每个无线电创建不同的 ID。

【参考方案1】：

asp-for="@Model.ActionNeeded" 正在为两个无线电生成相同的 id。

为每个收音机创建不同的 id 并在标签中添加for=""

<div class="custom-control custom-radio">
    <input type="radio" id="ActionYes" value="Yes" class="custom-control-input"  name="ActionNeeded" required>
    <label for="ActionYes" class="custom-control-label">Yes</label>
</div>
<div class="custom-control custom-radio mb-3">
    <input type="radio" id="ActionNo" value="No" class="custom-control-input"  name="ActionNeeded" required>
    <label for="ActionNo" class="custom-control-label">No</label>
</div>

【讨论】：

@user7849697 我相信模型绑定器使用 name 属性自动将 html 映射到属性。你能检查name="ActionNeeded"现在是否有效吗？

【参考方案2】：

你有两个按钮同名，这会让你失去它们的价值：

name="radio-stacked"

【讨论】：

我删除了名称但仍然无法选择 RadioButton

你要为每一个输入一个不同的名字，或者如果你不输入，你必须寻找生成的名字。

添加了名称但仍然无法选择 RadioButton :D

电台必须同名才能被视为一个组

如果你想将它们创建为一个组，你必须在每个组中添加不同的值