想知道是否有人可以用下面的 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 并且有一段时间没有使用它。所以任何指针表示赞赏
谢谢
【问题讨论】：
此代码将检查文本框、电子邮件和复选框输入类型，在我的最后工作正常，如果输入字段被隐藏，将只检查可见字段。
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;
});
【讨论】：
我一直在尝试按照这个线程来使用自定义 stripe 表单来实现这一点。
这是我的代码：
$(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);
}
}在我添加 .hasClass 条件之前一切正常。该按钮只是保持禁用状态！
【讨论】：
使用提交时的表单。干净整洁。您不必担心更改和按键事件触发。不必担心键位和焦点问题。
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;
}
【讨论】：
更改按钮的属性而不是属性...使用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 的更高版本中被引入...
更新
看完下面的cmets，
$(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 代码）...这是fiddle
【讨论】：
Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
您必须再次运行 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();
});
});
【讨论】：
您的事件绑定仅在文档准备就绪。
所以当你改变一些东西时没有听众。
改为这样做：
$(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);
}
}
【讨论】：
inputTel 是submit 按钮之前最后一个字段的ID）：$('#inputTel').keypress(function() {validate();}); 到$('#inputName, #inputEmail, #inputTel').change(validate); 之后的行。我认为它对 UX 有帮助，因为只要用户在“最后一个”字段和类型中，它就会再次运行 validate() 函数，而用户可能会在提交前在最后一个字段中输入一些内容，并且可能会被抛弃通过仍然禁用的提交按钮。
keypress的人，我要补充一点，按键不识别退格，keydown 执行“先前状态”（即在按键之前），所以我找到了keyup适合我的用例
您当前的代码没问题，但没有响应用户事件，这是您绊倒的地方。
$('#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);
}
});
【讨论】：