如果使用 jQuery 输入为空，则禁用提交按钮答案

【问题标题】：disable submit button if inputs are empty with jQuery如果使用 jQuery 输入为空，则禁用提交按钮
【发布时间】：2012-07-14 09:46:45
【问题描述】：

我正在尝试禁用提交按钮，直到用户填写表单中的输入字段。

我在这里找到了THIS 线程，它有一个非常好的答案。在填写完字段后重新启用提交按钮时我遇到了一点问题。

有人可以看看这个函数并帮助我弄清楚我缺少什么吗？任何帮助将不胜感激：D 谢谢。

Heres a Fiddle也

$(document).ready(function() {
var $submit = $("input[type=submit]");

if ( $("input:empty").length > 0 ) {
$submit.attr("disabled","disabled");
} else {
$submit.removeAttr("disabled");
}
});


<form method="POST" action="<%=request.ServerVariables("SCRIPT_NAME")%>">
User Name: <input name="Username" type="text" size="14" maxlength="14" /><br />
Password: <input name="last_name" type="password" size="14" maxlength="14"><br />
<input type="submit" value="Login" name="Submit" id="loggy">
</form>

【问题讨论】：

标签： jquery forms input submit

【解决方案1】：

$(document).ready(function() {
    var $submit = $("input[type=submit]"),
        $inputs = $('input[type=text], input[type=password]');

    function checkEmpty() {

        // filter over the empty inputs

        return $inputs.filter(function() {
            return !$.trim(this.value);
        }).length === 0;
    }

    $inputs.on('blur', function() {
        $submit.prop("disabled", !checkEmpty());
    }).blur(); // trigger an initial blur
});

Working sample

你也可以使用 keyup 来代替模糊：

    $inputs.on('keyup', function() {
        $submit.prop("disabled", !checkEmpty());
    }).keyup();  // trigger an initial keyup

您还可以组合多个事件：

    $inputs.on('keyup blur', function() {
        $submit.prop("disabled", !checkEmpty());
    }).keyup();  // trigger any one

【讨论】：

非常感谢！效果很好：D是否可以更改模糊？所以用户不必点击输入以删除禁用？
没关系，我将“模糊”更改为“按键”并得到了我希望的确切结果。再次非常感谢您的帮助和演示！ :D

【解决方案2】：

在您的问题中，我没有看到您不断检查输入状态的代码，我认为问题在于。

您可以使用现场活动来做到这一点。以您的代码为例：

$(document).ready(function() {
      var $submit = $("input[type=submit]");

      function checkSubmitState()
      {
          if ( $("input:empty").length > 0 ) {
             $submit.attr("disabled","disabled");
          } else {
             $submit.removeAttr("disabled");
          }
      }

      // check the submit state on every change or blur event.
      $("input").live("change blur", checkSubmitState);
});

【讨论】：

【解决方案3】：

在运行条件之前使用 keyup 事件检查值：

$(document).ready(function() {
    $('input:text, input:password').keyup(function() {
        if ($(this).val() !== "") {
            $('input:submit').removeAttr('disabled');
        } else {
            $('input:submit').attr('disabled', 'true');
        }
    });
});

http://jsfiddle.net/tovic/He4Kv/23/

【讨论】：

【解决方案4】：

当我在寻找 jQuery sn-p 时，这里的一些答案已经过时了。我对它们进行了测试，但由于我认为已被弃用，它们似乎无法正常运行。

所以我自己做了一个，这是一种更新的工作方式 (jQuery >=3.0)，例如监听输入事件。

let inp = $('[type=text]'),
    btn = $('[type=button]')
btn.prop('disabled', true)

inp.on('input', () => {
  let empty = []
  inp.map(v => empty.push(inp.eq(v).val()))
  btn.prop('disabled', empty.includes(''))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
	<input type=text><br>
	<input type=text><br>
	<input type=text><br>
	<input type=button value=Send>
</form>

一个纯 JavaScript 示例是 here。

【讨论】：