Question

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

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

我的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" />
    </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);
        }
    });
})()

非常感谢任何帮助！

Answer 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').keyup(function() {

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

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

这是a working fiddle。

Answer 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');
    }                
  });
});

Answer 3

您可以这样写，而不用使用“ if”条件

$('button[type=submit]').prop('disabled', empty);

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

3 个答案: