如果使用jQuery输入为空,则禁用提交按钮

Question

我试图禁用提交按钮,直到用户填写表单中的输入字段.

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

有人可以看看这个功能,并帮我弄清楚我错过了什么？任何帮助将不胜感激: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
});

工作样本

您也可以使用如下键盘而不是模糊:

    $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