ユーザがテキストエリアから値を削除していないかどうかを動的にチェックする方法

-3

すべてのテキストボックスに値が設定され、ラジオボタンがチェックされたときにボタンを有効にしたい。ユーザがテキストエリアから値を削除していないかどうかを動的にチェックする方法

私はいくつかの値を削除しようとしない限り、動作します。次に、テキストボックスの1つが空ですが、ボタンを有効にしていますが、無効にしておきたいものです。どのようにそれを変更するには？

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

出典

2016-12-17 Karolina

他のイベントハンドラ内にイベントリスナーをネストしないでください。それらを分けてください。あなたのケースでは、すべてのキーアップで新しい変更リスナーが作成され、以前のものが存在し、ラジオにイベントリスナーが存在しないため、キーアップが発生しません。 – charlietfl

私はこれはあなたのために働くと思います。ラジオボタンを追加して、サンプルのセレクタに近づけてやっていることを更新しました。これは、あなたの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>

出典

2016-12-17 17:20:02

私の答えがより完全に更新されました。最初にボタンを無効にする。入力が空になるか、すべてが値を持つようにボタンを有効または無効にします。 –

私は何かが間違っています今は全く動作しないので – Karolina

私の例をHTMLファイルに保存すると、あなたのために私の例がうまくいかないと言っていますか？それとも、コードに組み込むときにうまくいかないのですか？ jqueryセレクタなどを自分のものに合わせて変更する必要があります。あなたのポストであなたのコード例を更新したら、私は何かトラブルを発見するのを助けることができます。 –

ユーザがテキストエリアから値を削除していないかどうかを動的にチェックする方法

答えて

関連する問題