如果输入为空 jquery，则禁用提交答案

【问题标题】：Disable submit if inputs empty jquery如果输入为空 jquery，则禁用提交
【发布时间】：2012-03-12 17:33:10
【问题描述】：

免责声明：我知道这个主题有很多问题，并且已经得到了高度解决，尽管我需要在我的特殊情况下得到帮助。

我正在尝试检查 keyup 上的输入值是否为空，然后禁用提交按钮。

我的 HTML sn-p:

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" />
    </div>
  </form>
</div>

我使用了来自here 的示例答案并进行了一些修改：

(function() {
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

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

任何帮助将不胜感激！

【问题讨论】：

刚刚回答了另一个问题。见：stackoverflow.com/questions/9671323/…
这里似乎工作正常：jsfiddle.net/yUQeq
你说得对，它正在工作 - 我有更大的问题:(

标签： javascript jquery forms submit

【解决方案1】：

我建议默认禁用该按钮。我还会查看.val() 的长度，而不是检查空字符串。最后，我认为document.ready() 比您现有的代码更具可读性：这是完整代码：

HTML

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

JS/jQuery

$(document).ready(function() {
  $('.field input').on('keyup', function() {
    let empty = false;

    $('.field input').each(function() {
      empty = $(this).val().length == 0;
    });

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

这里是a working fiddle。

【讨论】：

empty = $(this).val().length == 0 与您在jsfiddle.net 上的示例代码不一样，并且它并不完全正确，因为empty 标志将仅取决于最后一个输入值
好主意，但如何至少输入一个值才能达到同样的效果？

【解决方案2】：

我在我的项目中使用它并且成功了。

$(document).ready(function() {
  $('.field').keyup(function() {

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

    if (empty) {
        $('.actions[type="submit"]').attr('disabled', 'disabled');
    } else {
        $('.actions[type="submit"]').removeAttr('disabled');
    }                
  });
});

【讨论】：