禁用提交按钮,如果与jQuery输入为空
问题描述:
我试图禁用提交按钮,直到用户填写了表单中的输入字段。禁用提交按钮,如果与jQuery输入为空
我发现THIS线程在这里有一个非常好的答案。我在填写字段时让提交按钮重新启用只是一个小问题。
有人可以看看这个功能,并帮助我找出我失踪的东西吗? 任何帮助将不胜感激: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>
答
$(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
答
在你的问题中,我没有看到你不断检查输入状态的代码,我认为问题在于。
您可以使用现场活动来做到这一点。 使用您的代码示例:
$(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);
});
答
使用keyup事件运行状况之前检查值:
$(document).ready(function() {
$('input:text, input:password').keyup(function() {
if ($(this).val() !== "") {
$('input:submit').removeAttr('disabled');
} else {
$('input:submit').attr('disabled', 'true');
}
});
});
答
这里的一些这些答案都是律过时因为我正在寻找一个jQuery代码片段。我测试了它们,由于我认为不合适,它们似乎不能正常运行。
所以我做了我自己的,这里是一个更新的工作方式(jQuery> = 3.0),例如监听输入事件。
var inp = $('[type=text]'),
btn = $('[type=button]')
btn.prop('disabled',true)
inp.on('input',() => {
var empty
inp.map(v =>
!inp.eq(v).val() ?
empty = true : false
)
btn.prop('disabled',empty || false)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
\t <input type=text><br>
\t <input type=text><br>
\t <input type=text><br>
\t <input type=button value=Send>
</form>
甲普通的JavaScript例子是here。
非常感谢!那奇妙地工作:D有可能改变模糊?所以用户不必点击输入以便禁用被删除? – xxstevenxo 2012-07-14 09:58:51
@xxstevenxo yup,看我的更新。你也可以用keyup做 – thecodeparadox 2012-07-14 09:59:48
没关系,我把'模糊'改成'按键',并得到了我期待的确切结果。非常感谢您的帮助和演示! :D – xxstevenxo 2012-07-14 10:00:36