禁用“提交”按钮，直到填写输入字段

想知道是否有人能用下面的jquery指出我正确的方向。 我想禁用提交按钮，直到填写输入字段。

我想出了这个

$(document).ready(function (){ if ($('#inputName, #inputEmail, #inputTel').val().length > 0) { $("input[type=submit]").attr("disabled", "false"); } else { $("input[type=submit]").attr("disabled", "true"); } }); 

但即使填写了所有文本输入字段，该按钮也会永久禁用

仍在学习Jquery并且暂时没有使用过它。所以任何指针都会受到赞赏

谢谢

Answer 1

您的事件绑定仅适用于文档准备。

所以当你改变某些东西时就没有听众。

改为：

 $(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); } } 

Answer 2

您当前的代码很好，但不响应用户事件，这是您绊倒的地方。

 $('#inputName, #inputEmail, #inputTel').keyup(function(){ if($(this).val().length > 0){ $("input[type=submit]").prop("disabled", false); }else{ $("input[type=submit]").prop("disabled", true); } }); 

实际编辑 ，这将无法正常工作。 因为其中一个元素会因为提交按钮而被启用，而不管其他元素。 我会暂时修补。

编辑这是粗略的草稿修复，它可能更漂亮，但绝对是一个很好的起点。

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

这是你的jsFiddle说明这种方法

Answer 3

更改按钮的属性而不是属性…使用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); } }); 

我认为这没有任何意义，因为你没有任何事件绑定…这只会检查输入是否在document.ready中有价值..但是事件绑定与否取决于你..但是这些特殊原因prop()是在更高版本的jquery中引入的…

更新

看到下面的评论后，

 $(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); } } 

这应该适用于任何数量的输入类型为文本（根本不需要更改javascript / jquery代码） …这里是小提琴

Answer 4

你必须再次运行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(); }); }); 

Answer 5

使用表单onsubmit。 干净整洁。 您不必担心更改和按键事件触发。 不必担心密钥和焦点问题。

http://www.w3schools.com/jsref/event_form_onsubmit.asp

 
 ... 
 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; }