除非填写了所有文本输入字段，否则禁用表单按钮

Question

我有一个包含多个文本输入的表单，我不想为每个输入添加 id，因为它们是从服务器端代码生成的 - 字段数可能不同等。我只想能够禁用提交按钮，直到在每个文本输入中都输入了文本。

我已经做到了这一点，但仅在文本输入到一个文本输入字段之前禁用按钮 - 我希望它保持禁用状态，直到文本输入到 所有 文本输入。

    <script>
        $(function () {
            $('#button').attr('disabled', true);

            $('input:text').keyup(function () {
                $('#button').prop('disabled', this.value == "" ? true : false);
            })
        });
    </script>

我也试过$('input:text').each().keyup(function (){ - 但没有使按钮可点击？

Answer 1

$('#button').attr('disabled', true);
$('input:text').keyup(function () {
   var disable = false;
       $('input:text').each(function(){
            if($(this).val()==""){
                 disable = true;      
            }
       });
  $('#button').prop('disabled', disable);
});

Demo

Answer 2

keyup 的回调函数现在只检查特定输入字段的值 (this.value)。相反，这需要遍历所有需要填写的输入字段，并且只有当所有输入字段都有文本时，您才更改 .prop 值。

$('input:text').keyup(function () {
    $('#button').prop('disabled', allFieldsAreFilled());
});

function allFieldsAreFilled() {
    var allFilled = true;
    // check all input text fields
    $("#yourForm input:text"]).each(function () {
        // if one of them is emptyish allFilled is no longer true
        if ($(this).val() == "") {
            allFilled = false;
        }
    });
    return allFilled;
}

Answer 3

试试这个：

$(function() {
  var bool = true, flag = false;
  $('#button').prop('disabled', bool); // use prop to disable the button

  $(document).keyup(function() { // listen the keyup on the document or you can change to form in case if you have or you can try the closest div which contains the text inputs
    $('input:text').each(function() { // loop through each text inputs
      bool = $.trim(this.value) === "" ?  true :  false; // update the var bool with boolean values
      if(bool)
      return flag;
    });
    $('#button').prop('disabled', bool); // and apply the boolean here to enable
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='button' id='button' value='button' />