使用jQuery更改选定的单选按钮

Question

我有一个MVC项目，在一个特定的页面中，我有一个表格，允许用户创建测试问题。 有一个用于问题文本的textarea字段，有四个用于答案的textarea字段，以及用于“ All Of the Above”和“ None Of the Above”的复选框。 每个潜在答案还有一个单选按钮，允许用户选择哪个答案是正确的。 如果用户选择添加“以上所有内容”作为选项，则“上无内容”的复选框和单选按钮以及答案4的文本区域和单选按钮都将被禁用。 如果选择了“以上皆非”，则将发生相同的事情，但“以上所有”和答案4除外。所有这些都可以正常工作。

问题是所选的单选按钮被禁用，它保持禁用状态，我希望该单选按钮被禁用，并且选中与选中复选框相对应的单选按钮。 我尝试了多种方法来实现此目的，但是没有一种方法起作用。 最近，我尝试使用单选按钮组的值来确定要选择和取消选择的单选按钮。

我知道这很长，但是我要包括整个页面的代码，其中包括HTML和JQuery。

@using WebContentDemo.Helpers;
@{
    ViewBag.Title = "Add A Question To Test";
}

<div class="container">
    <div class="row">
        <div class="col-md-12">

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            @using (Html.BeginForm("AddQuestion", "Test", FormMethod.Post))
            {
                <div class="panel @Utilities.PanelColor()">
                    <div class="panel-heading text-center">
                        <h2 style="margin-top:1px;margin-bottom:1px;">@ViewBag.Title </h2>
                    </div>
                    <div class="panel-body text-center" style="padding-left:15px;padding-right:15px;">

                        <div class="row" style="margin-bottom:15px;">
                            <div class="col-md-6">
                                <p>
                                    Type in the question text for this question in the text field to the right. After that, you can
                                    type in the text for up to four answers. If you choose to make one of the possible answers "All Of The Above"
                                    or "None Of The Above", the option that you do not choose, and the fourth answer text field will be disabled.
                                </p>
                                <p>
                                    Ensure that you mark the correct answer with the radio button
                                    (<input type="radio" disabled="disabled" style="cursor:default" />) next to the that answer. By default, the
                                    radio button for the first answer will be selected, so you could also simply make sure to always type the
                                    correct answer into that field.
                                </p>
                            </div>
                            <div class="col-md-6 text-center">
                                <label for="QuestionText">Question Text</label>
                                <textarea class="form-control" id="QuestionText" placeholder="Question Text" autofocus="autofocus" rows="6" type="text" style="max-width:100%;width:100%" required="required" name="QuestionText"></textarea>
                            </div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel @Utilities.PanelColor()">
                                    <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;">
                                        <label for="Answer_1">First Answer</label>
                                    </div>
                                    <div class="panel-body">
                                        <textarea class="form-control" id="Answer_1" placeholder="First Answer" style="max-width:100%;width:100%;" rows="4" required="required" name="Answer_1"></textarea>
                                    </div>
                                    <div class="panel-footer">
                                        <label for="Answer_1_Radio">This Is The Correct Answer</label>
                                        <input type="radio" id="Answer_1_Radio" class="form_radio" checked="checked" name="CorrectAnswer" value="Answer_1" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel @Utilities.PanelColor()">
                                    <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;">
                                        <label for="Answer_2">Second Answer</label>
                                    </div>
                                    <div class="panel-body">
                                        <textarea class="form-control" id="Answer_2" placeholder="Second Answer" style="max-width:100%;width:100%;" rows="4" required="required" name="Answer_2"></textarea>
                                    </div>
                                    <div class="panel-footer">
                                        <label for="Answer_2_Radio">This Is The Correct Answer</label>
                                        <input type="radio" id="Answer_2_Radio" class="form_radio" name="CorrectAnswer" value="Answer_2" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel @Utilities.PanelColor()">
                                    <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;">
                                        <label for="Answer_3">Third Answer</label>
                                    </div>
                                    <div class="panel-body">
                                        <textarea class="form-control" id="Answer_3" placeholder="Third Answer" style="max-width:100%;width:100%;" rows="4" required="required" name="Answer_3"></textarea>
                                    </div>
                                    <div class="panel-footer">
                                        <label for="Answer_3_Radio">This Is The Correct Answer</label>
                                        <input type="radio" id="Answer_3_Radio" class="form_radio" name="CorrectAnswer" value="Answer_3" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4" style="max-height:100%;height:100%;">
                                <div class="panel @Utilities.PanelColor()">
                                    <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;">
                                        <label>Other</label>
                                    </div>
                                    <div class="panel-body" style="max-height:100%;height:100%;">
                                        <label for="AllOfTheAbove">All Of The Above</label>
                                        <input type="checkbox" value="true" id="AllOfTheAbove" name="AllOfTheAbove" />
                                    </div>
                                    <div class="panel-footer">
                                        <label for="AllOfTheAbove_Radio">This Is The Correct Answer</label>
                                        <input type="radio" id="AllOfTheAbove_Radio" class="form_radio" name="CorrectAnswer" value="AllOfTheAbove" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4" style="max-height:100%;height:100%;">
                                <div class="panel @Utilities.PanelColor()">
                                    <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;">
                                        <label>Other</label>
                                    </div>
                                    <div class="panel-body" style="max-height:100%;height:100%;">
                                        <label for="NoneOfTheAbove">None Of The Above</label>
                                        <input type="checkbox" value="true" id="NoneOfTheAbove" name="NoneOfTheAbove" />
                                    </div>
                                    <div class="panel-footer">
                                        <label for="NoneOfTheAbove_Radio">This Is The Correct Answer</label>
                                        <input type="radio" id="NoneOfTheAbove_Radio" class="form_radio" name="CorrectAnswer" value="NoneOfTheAbove" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel @Utilities.PanelColor()">
                                    <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;">
                                        <label for="Answer_4">Fourth Answer</label>
                                    </div>
                                    <div class="panel-body">
                                        <textarea class="form-control" id="Answer_4" placeholder="Third Answer" style="max-width:100%;width:100%;" rows="4" required="required" name="Answer_3"></textarea>
                                    </div>
                                    <div class="panel-footer">
                                        <label for="Answer_4_Radio">This Is The Correct Answer</label>
                                        <input type="radio" id="Answer_4_Radio" class="form_radio" name="CorrectAnswer" value="Answer_4" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-md-6 text-center">
                                <label for="AddAnother">Add Another Question?</label>
                                <input type="checkbox" value="true" id="AddAnother" name="AddAnother" />
                            </div>
                            <div class="col-md-6 text-center">
                                <input style="max-width:100%;width:100%;" class="btn btn-success" type="submit" value="Add This Question" />
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

@section scripts
{
    <script type="text/javascript">
        $('#AllOfTheAbove').click(function () {
            if ($('#AllOfTheAbove').is(':checked')) {
                $('#Answer_4').prop("disabled", "disabled");
                $('#NoneOfTheAbove').prop("disabled", "disabled");
                $('#NoneOfTheAbove_Radio').prop("disabled", "disabled");
                $('#Answer_4_Radio').prop("disabled", "disabled");
                if ($('.form_radio').val() == "NoneOfTheAbove") {
                    $('#NoneOfTheAbove_Radio').removeAttr("checked");
                    $('#AllOfTheAbove_Radio').prop("checked", "checked");
                }
                if ($('.form_radio').val() == "Answer_4") {
                    $('#Answer_4').removeAttr("checked");
                    $('#AllOfTheAbove_Radio').prop("checked", "checked");
                }
            }
            else if ($('#AllOfTheAbove').not(':checked')) {
                $('#Answer_4').removeAttr("disabled");
                $('#NoneOfTheAbove').removeAttr("disabled");
                $('#NoneOfTheAbove_Radio').removeAttr("disabled");
                $('#Answer_4_Radio').removeAttr("disabled");
            }
        });
        $('#NoneOfTheAbove').click(function () {
            if ($('#NoneOfTheAbove').is(':checked')) {
                $('#Answer_4').prop("disabled", "disabled");
                $('#AllOfTheAbove').prop("disabled", "disabled");
                $('#AllOfTheAbove_Radio').prop("disabled", "disabled");
                $('#Answer_4_Radio').prop("disabled", "disabled");
                if ($('.form_radio').val() == "AllOfTheAbove") {
                    $('#AllOfTheAbove_Radio').removeAttr("checked");
                    $('#NoneOfTheAbove_Radio').prop("checked", "checked");
                }
                if ($('.form_radio').val() == "Answer_4") {
                    $('#Answer_4').removeAttr("checked");
                    $('#NoneOfTheAbove_Radio').prop("checked", "checked");
                }
            }
            else if ($('#AllOfTheAbove').not(':checked')) {
                $('#Answer_4').removeAttr("disabled");
                $('#AllOfTheAbove').removeAttr("disabled");
                $('#AllOfTheAbove_Radio').removeAttr("disabled");
                $('#Answer_4_Radio').removeAttr("disabled");
            }
        });
    </script>
}

Answer 1

据我所知，您想在单击任一复选框时禁用其他正确的答案选项。 我从其他答案上复制了以下内容。

当可以使用attr（）/ removeAttr（）执行此操作时，为什么要使用prop（）？ 基本上，在获取或设置属性（例如自动播放，选中，禁用和必需）时，应使用prop（）。

通过使用removeAttr（），您将完全删除禁用的属性本身-而prop（）只是将属性的基础布尔值设置为false。

虽然您可以使用attr（）/ removeAttr（）来完成您想做的事情，但这并不意味着它应该被完成（在这种情况下，这可能会导致奇怪/有问题的行为）。

  <script type="text/javascript">
    $('#AllOfTheAbove').click(function () {
        if ($('#AllOfTheAbove').is(':checked')) {
            console.log("All checked");
            $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('checked', false); }); //uncheck all first..
            //$('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('disabled', true); }); //disable all                
            $("#Answer_4_Radio").prop('disabled', true);
            $("#NoneOfTheAbove_Radio").prop('disabled', true);
            $("#NoneOfTheAbove").prop('checked', false);

            $('#AllOfTheAbove_Radio').prop("checked", true);
            $('#AllOfTheAbove_Radio').prop("disabled", false);
        }
        else if ($('#AllOfTheAbove').not(':checked')) {
            console.log("All un checked");
            $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('checked', false); }); //uncheck all first..
            $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('disabled', false); }); //enable all   
        }
    });
    $('#NoneOfTheAbove').click(function () {
        if ($('#NoneOfTheAbove').is(':checked')) {
            console.log("None checked");
            $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('checked', false); }); //uncheck all first..
            //$('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('disabled', true); }); //disable all
            $("#Answer_4_Radio").prop('disabled', true);
            $("#AllOfTheAbove_Radio").prop('disabled', true);
            $("#AllOfTheAbove").prop('checked', false);

            $('#NoneOfTheAbove_Radio').prop("checked", true);
            $('#NoneOfTheAbove_Radio').prop("disabled", false); 
        }
        else if ($('#AllOfTheAbove').not(':checked')) {
            console.log("None un checked");
            $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('checked', false); }); //uncheck all first..
            $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('disabled', false); }); //enable all                 
        }
    });

    $('#NoneOfTheAbove_Radio').click(function () {
        if ($('#NoneOfTheAbove_Radio').is(':checked')) {  
            $("#NoneOfTheAbove").prop("checked", true);
            $("#AllOfTheAbove").prop("checked", false);
        }
    });

    $('#AllOfTheAbove_Radio').click(function () {
        if ($('#AllOfTheAbove_Radio').is(':checked')) {  
            $("#AllOfTheAbove").prop("checked", true);
            $("#NoneOfTheAbove").prop("checked", false);
        }
    });        
</script> 

希望这可以帮助...

Answer 2

我只需要对T. Shah的代码进行一些修改即可使其完全按照我的要求运行。 这是我所做的。

<script type="text/javascript">
$('#AllOfTheAbove').click(function () {
    if ($('#AllOfTheAbove').is(':checked')) {
        console.log("All checked");
        $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('checked', false); }); //uncheck all first..
        $("#Answer_4_Radio").prop('disabled', true);
        $("#NoneOfTheAbove_Radio").prop('disabled', true);
        $("#NoneOfTheAbove").prop('checked', false);
        $("#Answer_4").prop('disabled', true);
        $('#AllOfTheAbove_Radio').prop("checked", true);
        $('#AllOfTheAbove_Radio').prop("disabled", false);
    }
    else if ($('#AllOfTheAbove').not(':checked')) {
        console.log("All un checked");
        $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('checked', false); }); //uncheck all first..
        $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('disabled', false); }); //enable all
        $("#Answer_4").prop('disabled', false);
        $("#Answer_1_Radio").prop("checked", true);
    }
});
$('#NoneOfTheAbove').click(function () {
    if ($('#NoneOfTheAbove').is(':checked')) {
        console.log("None checked");
        $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('checked', false); }); //uncheck all first..
        $("#Answer_4_Radio").prop('disabled', true);
        $("#AllOfTheAbove_Radio").prop('disabled', true);
        $("#AllOfTheAbove").prop('checked', false);
        $("#Answer_4").prop('disabled', true);
        $('#NoneOfTheAbove_Radio').prop("checked", true);
        $('#NoneOfTheAbove_Radio').prop("disabled", false);
    }
    else if ($('#AllOfTheAbove').not(':checked')) {
        console.log("None un checked");
        $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('checked', false); }); //uncheck all first..
        $('input:radio[name=CorrectAnswer]').each(function () { $(this).prop('disabled', false); }); //enable all
        $("#Answer_4").prop('disabled', false);
        $("#Answer_1_Radio").prop("checked", true);
    }
});

$('#NoneOfTheAbove_Radio').click(function () {
    if ($('#NoneOfTheAbove_Radio').is(':checked')) {
        $("#NoneOfTheAbove").prop("checked", true);
        $("#AllOfTheAbove").prop("checked", false);
        $("#AllOfTheAbove_Radio").prop('disabled', true);
        $("#Answer_4").prop('disabled', true);
        $("#Answer_4_Radio").prop('disabled', true);
    }
});

$('#AllOfTheAbove_Radio').click(function () {
    if ($('#AllOfTheAbove_Radio').is(':checked')) {
        $("#AllOfTheAbove").prop("checked", true);
        $("#NoneOfTheAbove").prop("checked", false);
        $("#NoneOfTheAbove_Radio").prop('disabled', true);
        $("#Answer_4").prop('disabled', true);
        $("#Answer_4_Radio").prop('disabled', true);
    }
});