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

Question

我有一个MVC项目，在一个特定的页面中，我有一个表单，允许用户为测试创建一个问题。问题文本有一个textarea字段，答案有4个textarea字段，以及＆＃34; All Of The Above＆＃34;的复选框。并且＆＃34;以上都不是＆＃34;。每个可能的答案也有单选按钮，允许用户选择哪个答案是正确答案。如果用户选择添加＆＃34; All Of The Above＆＃34;作为一个选项，然后复选框和单选按钮为＆＃34;无以上＆＃34;并且答案4的textarea和单选按钮都被禁用。如果＆＃34;以上都不是＆＃34;被选中，然后同样的事情发生，除了＆＃34; All Of The Above＆＃34;和答案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（），你完全删除了disabled属性 - 而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);
    }
});