当动态添加的文本区域为空时，禁用提交按钮 - jQuery jQuery

Question

我试图在任何一个文本区域为空的情况下禁用提交按钮。如果这个区域是静态的，它就能正常工作。但是如果我通过点击按钮添加另一个文本区域，只有当我在动态添加的文本区域内点击时，它才会工作。

我试过使用各种事件（输入点击键上键上模糊键上），但结果还是一样。

以下是我的代码

<div class='form'>
   <textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea>
   <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" id="insert"/>
   </div>
   <hr>
   <button class="btn btn-info add_field_button">Add Another textarea</button>
   <div class="input_fields_wrap form-group">
   </div>

$(document).ready(function () {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function (e) { //on add input button click

        e.preventDefault();

        if (x < max_fields) { //max input box allowed
            x++; //text box increment

            $(wrapper).append('<textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea><button type="button" class="btn btn-danger remove_field">Delete</button></div>');


        }
    });

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});
$(document).ready(function () {
    $(document).on('input click keyup keypress blur keyup', 'textarea', function () {

        var empty = false;
        $('textarea').each(function () {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', 'disabled');
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
});

我是否应该在添加新的textarea的按钮上启动检查是否有textarea为空的功能？

以下是演示 jsfiddle

Answer 1

当你添加新的 textarea 在...之下 click 事件只检查文本区域是否为空，并根据这个按钮是否被禁用或启用。

演示代码 :

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click

    e.preventDefault();

    if (x < max_fields) { //max input box allowed
      x++; //text box increment
    //added <div>
      $(wrapper).append('<div><textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea><button type="button" class="btn btn-danger remove_field">Delete</button></div>');


    }
    //chcking added textrea is empty
    $('textarea').each(function() {
      if ($(this).val().length == 0) {
        //disable
        $('.actions input').attr('disabled', 'disabled');
      } else {
        //enabled
        $('.actions input').attr('disabled', false);
      }
    });


  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
       //chcking added textrea is empty
    $('textarea').each(function() {
      if ($(this).val().length == 0) {
        //disable
        $('.actions input').attr('disabled', 'disabled');
      } else {
        //enabled
        $('.actions input').attr('disabled', false);
      }
    });
  })
});
$(document).ready(function() {
  $(document).on('input click keyup keypress blur keyup', 'textarea', function() {

    var empty = false;
    $('textarea').each(function() {
      if ($(this).val().length == 0) {
        empty = true;
      }
    });

    if (empty) {
      $('.actions input').attr('disabled', 'disabled');
    } else {
      $('.actions input').attr('disabled', false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea>
  <div class='actions'>
    <input type="submit" value="Login" disabled="disabled" id="insert" />
  </div>
  <hr>
  <button class="btn btn-info add_field_button">Add Another textarea</button>
  <div class="input_fields_wrap form-group">
  </div>
</div>