Bootstrap 我的 asp.net 核心 mvc 中的单选按钮不可选择

Question

我的 asp.net mvc 核心 Web 应用程序中有以下代码来显示 2 个单选按钮：-

<div class="form-group">
                      
                        <label class="control-label" style="font-weight:bold">@Model.SubmissionQuestion[i].Question</label><br/>
                       
                        <div class="custom-control custom-radio"> 
                        <input type="radio" asp-for="@Model.SubmissionQuestionSubmission[i].Answer" value="true"  class="custom-control-input" />
                        <label class="custom-control-label" style="color: #7e7e7e;font-size:14px;font-weight:bold">Yes</label>
                        </div>
                        
                        <div class="custom-control custom-radio">
                        <input type="radio" asp-for="@Model.SubmissionQuestionSubmission[i].Answer" value="false" class="custom-control-input"/>
                        <label class="custom-control-label" style="color: #7e7e7e;font-size:14px;font-weight:bold">No</label>
                        </div>

</div>

这将生成以下标记：-

                <label class="control-label" style="font-weight:bold">Are you currently ...?</label><br>
               
                <div class="custom-control custom-radio"> 
                <input type="radio" value="true" class="custom-control-input" name="SubmissionQuestionSubmission[0].Answer" id="SubmissionQuestionSubmission_0d__Answer">
                <label class="custom-control-label" style="color: #7e7e7e;font-size:14px;font-weight:bold">Yes</label>
                </div>
                <div class="custom-control custom-radio">
                <input type="radio" value="false" class="custom-control-input" id="SubmissionQuestionSubmission_0__Answer" name="SubmissionQuestionSubmission[0].Answer">
                <label class="custom-control-label" style="color: #7e7e7e;font-size:14px;font-weight:bold">No</label>
                </div>

但是我得到的单选按钮不会 select-可用（就像它们被禁用一样），知道发生了什么吗？

谢谢

Answer 1

需要在label中添加for绑定input的id，id不能重复。这是一个有效的演示：控制器：

        [HttpGet]
        public IActionResult TestRadio()
        {
            Submission s = new Submission();
            List<SubmissionQuestion> sqs = new List<SubmissionQuestion> { new SubmissionQuestion { Question="question1"},new SubmissionQuestion { Question="question2"}, new SubmissionQuestion { Question = "question3" } };
            List<SubmissionQuestionSubmission> sqss = new List<SubmissionQuestionSubmission> { new SubmissionQuestionSubmission { Answer = true }, new SubmissionQuestionSubmission { Answer = false }, new SubmissionQuestionSubmission { Answer = true } };
            s.SubmissionQuestion = sqs;
            s.SubmissionQuestionSubmission = sqss;
            return View(s);
        }
        [HttpPost]
        public IActionResult TestRadio(Submission s) {
            return View();
        }

查看：

@model Submission
@{
    ViewData["Title"] = "TestRadio";
}

<h1>TestRadio</h1>
<form method="post">
    @for (int i = 0; i < @Model.SubmissionQuestion.Count(); i++)
    {
        <div class="form-group">


            <label class="control-label" style="font-weight:bold">@Model.SubmissionQuestion[i].Question</label><br />

            <div class="custom-control custom-radio">
                @Html.RadioButtonFor(model => model.SubmissionQuestionSubmission[i].Answer, "true", new { @class = "custom-control-input", @id = "true_" + @i })
                <label class="custom-control-label" style="color: #7e7e7e;font-size:14px;font-weight:bold" for="true_@i">Yes</label>
            </div>

            <div class="custom-control custom-radio">
                @Html.RadioButtonFor(model => model.SubmissionQuestionSubmission[i].Answer, "false", new { @class = "custom-control-input", @id = "false_" + @i })
                <label class="custom-control-label" style="color: #7e7e7e;font-size:14px;font-weight:bold" for="false_@i">No</label>
            </div>
        </div>
    }
    <div>
        <input type="submit" value="submit"/>
    </div>
</form>

结果：

Bootstrap 我的 asp.net 核心 mvc 中的单选按钮不可选择

Bootstrap radio buttons inside my asp.net core mvc are not selectable

html

radio-button

asp.net-core-mvc

asp.net-core

bootstrap-4