JQuery修复：答题应用单选按钮单题内互斥功能异常

问题根源 #

所有单选按钮的name属性统一设为Options，浏览器会将所有同name的单选框归为同一组，导致选中任意一题的选项时，会取消所有其他题目的选项。此外，你额外编写的jQuery逻辑属于冗余操作，原生单选框本身就支持同组互斥功能。

修复步骤 #

1. 修改单选框的name属性：为每个题目生成独立的name值，确保同一题目下的单选框使用相同name，不同题目name不同。将name改为Options_@item.QuestionID即可。
2. 移除冗余的jQuery脚本：原生单选框的互斥功能已经满足需求，无需额外JS逻辑。

修改后的核心代码片段 #

@foreach (var item in Questions)
{
    <div class="question" id="@item.QuestionID">
        <legend dir="rtl">@item.QuestionText</legend>
        <ul class="list-group" style="direction: rtl;margin-left: 2rem;">
            <li class="list-group-item" style="background: linear-gradient(to right, #009e49 0%, #efea07 100%);">
                <div class="form-check">
                    <input value="@item.QuestionID" name="QuestionID" hidden />
                    <label><input type="radio" id="@($"Option1_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option1" class="answer" name="Options_@item.QuestionID">@item.Option1</label>
                    <label><input type="radio" id="@($"Option2_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option2" class="answer" name="Options_@item.QuestionID">@item.Option2</label>
                    <label><input type="radio" id="@($"Option3_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option3" class="answer" name="Options_@item.QuestionID">@item.Option3</label>
                    <label><input type="radio" id="@($"Option4_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option4" class="answer" name="Options_@item.QuestionID">@item.Option4</label>
                </div>
            </li>
        </ul>
    </div>
    <br />
}

移除的冗余脚本 #

删除以下这段jQuery代码：

$(document).ready(function () {
    $('.answer').change(function () {
        var questionID = $(this).data('question-id');
        $('input[type=radio][data-question-id="' + questionID + '"]').not(this).prop('checked', false);
    });
});

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