禁用提交按钮，如果输入是空的jQuery(disable submit button if inpu

我试图禁用提交按钮，直到用户填写表单的输入域。

我发现这此线程它有一个非常好的答案。 我有一点点问题得到提交按钮时字段填写了重新启用。

是否有人可以看看这个功能，并帮我找出我错过了什么？ 任何帮助将不胜感激：d谢谢。

继承人小提琴也

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

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

工作样本

相反，模糊的，你还可以用像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

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

Answer 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/

Answer 4:

这里的一些这些答案都是律过时了，因为我一直在寻找一个jQuery片段。 我测试了他们，他们似乎并不正常发挥作用了，由于弃用我的想法。

所以我做了我自己的，这里是监听到例如输入事件较新的工作方式（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的例子是在这里 。

文章来源: disable submit button if inputs are empty with jQuery