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

Disable form button unless all text input fields are filled in

本文关键字：文本 字段 输入 表单 按钮      更新时间：2023-09-26

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

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

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

我也试过$('input:text').each().keyup(function (){，但不能点击按钮吗？

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

演示

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;
}

试试这个：

$(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' />

相关文章：