Question

我想在所有文本框都有值并选中radiobutton时启用按钮。

只要我不尝试删除某些值，它就可以正常工作。然后其中一个文本框为空，但按钮仍然启用，而我希望它们被禁用。怎么改变它？

<body>
    <h2>@ViewBag.Title.</h2>
<div class="row">
    <div class="col-md-8">
        <section>
            @using (Html.BeginForm("Add", "Question", new {ReturnUrl = ViewBag.ReturnUrl}, FormMethod.Post, new {@class = "form-horizontal", role = "form"}))
            {
                @Html.AntiForgeryToken()
                <h4>//</h4>
                <hr/>
                @Html.ValidationSummary(true, "", new {@class = "text-danger"})

                        @Html.TextAreaFor(m => m.QuestionContent, new {@class = "form-control", @rows = "7", @cols = "50", @id= "a", @type = "textarea" })

                        @Html.TextAreaFor(m => m.AnswerA, new {@class = "form-control", @rows = "7", @cols = "50", @style = "margin-top: 15px", @id = "a", @type = "input" })




    @Html.TextAreaFor(m => m.AnswerC, new {@class = "form-control", @rows = "7", @cols = "50", @style = "margin-top: 15px",@id = "a", @type = "input" })

                            @Html.TextAreaFor(m => m.AnswerD, new {@class = "form-control", @rows = "7", @cols = "50", @style = "margin-top: 15px; margin-bottom: 30px", @id = "a", @type = "input" })

                        @Html.RadioButtonFor(m => m.CorrectAnswer, "a", new {@type="radio"})

                        @Html.RadioButtonFor(m => m.CorrectAnswer, "b", new { @type = "radio" })

                        @Html.RadioButtonFor(m => m.CorrectAnswer, "c", new { @type = "radio" })

                        @Html.RadioButtonFor(m => m.CorrectAnswer, "d", new { @type = "radio" })

                                <input id="addNewQuestion" type="submit" value="Dodaj nowe pytanie" class="btn btn-default" style="margin-top: 30px; margin-left: -80px !important"/>
                                <input id="finish" type="submit" name="AddAndFinish" value="Zakończ dodawanie testu" formaction="AddAndFinish" class="btn btn-default" style="margin-top: 30px; margin-left: 10px !important"/>
                            </div>
                        </div>
                    </div>
                }
            </section>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {

            $('input[type="submit"]').attr('disabled', true);

            $('input[type="text"],textarea').on('keyup', function () {

                var questionContentValue = $("#questionContentArea").val();
                var answerAValue = $('input[name="ans_a"]').val();
                var answerBValue = $('input[name="ans_b"]').val();
                var answerCValue = $('input[name="ans_c"]').val();
                var answerDValue = $('input[name="ans_d"]').val();

                var clicked = false;

                $('[type="radio"]').change(function() {

                    clicked = true;

                if ((questionContentValue != '') && (answerAValue != '') && (answerBValue != '') && (answerCValue != '') && (answerDValue != '')&& clicked == true) {

                        $('input[type="submit"]').attr('disabled', false);

                } else {
                    $('input[type="submit"]').attr('disabled', true);
                }
            });
            });
        });

    </script>
    </body>

There're also other stufs in code to make my html look good, but they're not important.

Answer 1

我认为这对你有用。我已将其更新为包含单选按钮，并且与您的示例选择器以及您正在执行的操作更加匹配。您可以更直接地将其合并到document ready()函数中。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    function disableButtons() {
        $("input[type='submit']").attr("disabled", true);
    }

    function enableButtons() {
        $("input[type='submit']").attr("disabled", false);
    }

    $(document).ready(function() {
        //start with buttons disabled.
        disableButtons();

        var $textInputs = $('input[type="text"],textarea');

        //when any inputs/textareas change, re-evaluate all inputs and toggle buttons appropriately
        $('input,textarea').on('change', function() {
            //filter text inputs to the empty ones and see if there are any
            var anyEmpty = $textInputs.filter(function() { return this.value == ""; }).length > 0;
            //see if any radio buttons are selected
            var anyClicked = $('input[type="radio"]:checked').length > 0;
            if (!anyEmpty && anyClicked) {
                enableButtons();
            } else {
                disableButtons();
            }
        });
    });
</script>
</head>

<body>
    <div><input type="text" name="input1" value="" class="input"></div>
    <div><input type="text" name="input2" value="" class="input"></div>
    <div><textarea name="input3" rows="8" cols="80" class="input"></textarea></div>
    <div>
        <input type="radio" name="radioInput" value="Radio 1">
        <input type="radio" name="radioInput" value="Radio 2">
    </div>

    <div class="buttons">
        <input type="submit" name="button1" class="button" value="Submit 1" />
        <input type="submit" name="button2" class="button" value="Submit2" />
    </div>
</body>

</html>

如果用户没有从textarea中删除值，如何动态检查

1 个答案: