jQuery 禁用提交按钮，直到填写输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16761696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable Submit button until Input fields filled in
提问by Richlewis
Was wondering if anyone could point me in the right direction with the following piece of jquery. I want to disable the submit button until my input fields have been filled in.
想知道是否有人可以使用以下 jquery 为我指出正确的方向。我想禁用提交按钮，直到我的输入字段被填写。
I have come up with this
我想出了这个
$(document).ready(function (){
if ($('#inputName, #inputEmail, #inputTel').val().length > 0) {
$("input[type=submit]").attr("disabled", "false");
}
else {
$("input[type=submit]").attr("disabled", "true");
}
});
but the button is permanently disabled, Even after filling in all the text input fields
但该按钮被永久禁用，即使在填写所有文本输入字段后
Still learning Jquery and haven't used it for a while.. So any pointers appreciated
仍在学习 Jquery 并且已经有一段时间没有使用它了..所以任何指针都表示赞赏
Thanks
谢谢
回答by Karl-André Gagnon
Your event binding is only on document ready.
您的事件绑定仅在文档准备好时。
So there is no listener when you change something.
因此，当您更改某些内容时，没有听众。
Do this instead :
这样做：
$(document).ready(function (){
validate();
$('#inputName, #inputEmail, #inputTel').change(validate);
});
function validate(){
if ($('#inputName').val().length > 0 &&
$('#inputEmail').val().length > 0 &&
$('#inputTel').val().length > 0) {
$("input[type=submit]").prop("disabled", false);
}
else {
$("input[type=submit]").prop("disabled", true);
}
}
回答by Ohgodwhy
Your current code is fine, but doesn't respond to user events, which is where you're tripping.
您当前的代码很好，但不响应用户事件，这就是您绊倒的地方。
$('#inputName, #inputEmail, #inputTel').keyup(function(){
if($(this).val().length > 0){
$("input[type=submit]").prop("disabled", false);
}else{
$("input[type=submit]").prop("disabled", true);
}
});
Editactually, this won't work. because one of those elements will caus ethe submit button to become enabled, regardless of the other ones. I'll hotfix momentarily.
实际上编辑，这行不通。因为这些元素之一会导致提交按钮被启用，而不管其他元素。我会立即修补。
EditHere's the rough draft fix, it could probably be prettier, but will definitely be a good starting point.
编辑这是粗略的修复草案，它可能更漂亮，但绝对是一个很好的起点。
var toValidate = $('#inputName, #inputEmail, #inputTel'),
valid = false;
toValidate.keyup(function () {
if ($(this).val().length > 0) {
$(this).data('valid', true);
} else {
$(this).data('valid', false);
}
toValidate.each(function () {
if ($(this).data('valid') == true) {
valid = true;
} else {
valid = false;
}
});
if (valid === true) {
$('input[type=submit]').prop('disabled', false);
}else{
$('input[type=submit]').prop('disabled', true);
}
});
回答by bipen
change the property of a button and not the attribute...use prop()instead of attr()
更改按钮的属性prop()而不是属性...使用而不是attr()
$(document).ready(function (){
if ($('#inputName, #inputEmail, #inputTel').val().length > 0) {
$("input[type=submit]").prop("disabled", false);
}
else {
$("input[type=submit]").prop("disabled", true);
}
});
and i assume this make no sense since you don't have any event binding on it.. this will only check if the input has value in document.ready or not.. however event binding or not that depends on you.. but for these particular reason prop()was introduced in later version of jquery...
我认为这是没有意义的，因为你没有任何事件绑定......这只会检查输入是否在 document.ready 中有值......但是事件绑定与否取决于你......但是对于这些特殊的原因prop()是在更高版本的 jquery 中引入的......
updated
更新
after seeing the comments below,
看到下面的评论后，
$(function(){
validate();
$('input[type="text"]').keyup(validate); //you can use your multiple id selector instead of the attribute selector that i am using
});
function validate() {
var inputvalue = $('input[type="text"]').filter(function (n) {
return this.value.length > 0;
})
if (inputvalue.length == $('input[type="text"]').length) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
this should work for any number of inputs with type as text (no need to change the javascript/jquery codes at all)... here is the fiddle
这应该适用于任何数量的输入类型为文本（根本不需要更改 javascript/jquery 代码）......这是小提琴
回答by Rohit Agrawal
you have to run the if command again to enable that can be done on changeevent of input
您必须再次运行 if 命令以启用可以在change输入事件时完成的操作
function updateSubmit(){
if ($('#inputName').val().length+$('#inputEmail').val().length+$('#inputTel').val().length > 2) {
$("input[type=submit]").prop("disabled", false);
}
else {
$("input[type=submit]").prop("disabled", true);
}
}
$(document).ready(function (){
updateSubmit();
$('#inputName, #inputEmail, #inputTel').on('change',function(){
updateSubmit();
});
});
回答by Timo
I've been trying to follow this thread to implement this with a custom stripeform.
我一直在尝试按照此线程使用自定义条纹表单来实现这一点。
This is my code:
这是我的代码：
$(document).ready(function (){
validate();
$('#EMAIL, #FNAME, #LNAME, #card-element').change(validate);
});
function validate(){
if ($('#EMAIL').val().length > 0 &&
$('#FNAME').val().length > 0 &&
$('#LNAME').val().length > 0 &&
$('#card-element').hasClass('StripeElement--complete')
){
$("button[type=button]").prop("disabled", false);
}
else {
$("button[type=button]").prop("disabled", true);
}
}Everything worked fine until I added the .hasClasscondition. The button just stays disabled!
一切正常，直到我添加了.hasClass条件。该按钮只是保持禁用状态！
回答by mithesh
This code will check textbox, email and checkbox input types, works fine at my end and also if input fields are hidden, will check only visible fields.
这段代码将检查文本框、电子邮件和复选框输入类型，在我最后工作正常，如果输入字段被隐藏，将只检查可见字段。
var register_disable = false;
jQuery("#SUBMIT_BUTTON-ID").prop('disabled', register_disable);
jQuery("input[type!='submit']").bind('keyup change', function () {
jQuery("input[type='text'], input[type='email']").not(':input:hidden').each(function () {
if (jQuery(this).val().trim() == "" || !$("input[type='checkbox']").is(':checked')) {
register_disable = true;
}
});
jQuery("#SUBMIT_BUTTON-ID").prop('disabled', register_disable);
register_disable = false;
});
回答by jecz
Use the form onsubmit. Nice and clean. You don't have to worry about the change and keypress events firing. Don't have to worry about keyup and focus issues.
使用提交时的表单。漂亮干净。您不必担心触发更改和按键事件。不必担心按键和焦点问题。
http://www.w3schools.com/jsref/event_form_onsubmit.asp
http://www.w3schools.com/jsref/event_form_onsubmit.asp
<form action="formpost.php" method="POST" onsubmit="return validateCreditCardForm()">
...
</form>
function validateCreditCardForm(){
var result = false;
if (($('#billing-cc-exp').val().length > 0) &&
($('#billing-cvv').val().length > 0) &&
($('#billing-cc-number').val().length > 0)) {
result = true;
}
return result;
}
