Javascript 如何动态检查用户是否从textarea中删除了值_Javascript_Html

Javascript 如何动态检查用户是否从textarea中删除了值

javascript html

Javascript 如何动态检查用户是否从textarea中删除了值,javascript,html,Javascript,Html,我想在所有文本框都有值且选中radiobutton时启用按钮只要我不尝试删除一些值，它就可以工作。然后其中一个文本框是空的，但按钮仍然处于启用状态，而我希望它们处于禁用状态。如何改变它 <body> <h2>@ViewBag.Title.</h2> <div class="row"> <div class="col-md-8"> <section> @using (H

我想在所有文本框都有值且选中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.

我想这对你有用。我已经对它进行了更新，使其包含单选按钮，并更接近于匹配示例的选择器和您正在做的事情。对于您来说，将其合并到文档就绪函数中可能更简单

<!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>

不要将事件侦听器嵌套在其他事件处理程序中。把它们分开。在您的情况下，每个键控都将创建一个新的更改侦听器，以前的更改侦听器将仍然存在，并且广播中不存在任何事件侦听器，直到键控发生更新我的答案以使其更完整。最初禁用按钮。当输入变为空或全部有值时启用和禁用按钮。我做错了什么，因为现在它根本不起作用。如果你将我的示例保存到html文件，你是说我的示例对你不起作用？或者当你试图将它合并到你的代码中时，它不起作用？您必须更改jquery选择器等以匹配您的内容。如果你在你的帖子中更新了你的代码示例，我可以尝试帮助你发现任何问题。我认为我的最新更新应该与你的示例非常匹配。希望您可以使用我的javascript代替您的javascript，而无需进行太多修改？至少基于我对您呈现的html的理解。