我有一个验证年龄的输入字段和一个复选框,当单击它时,它会激活表单的 #btn-activation 按钮,我想更改我的代码,以便 #btn-activation 按钮只有在两者都激活时才会被激活是真的。
复选框:
$("#ChkTerms").prop('checked', false);
$("#ChkTerms").click(function () {
if ($('#ChkTerms').is(":checked")) {
$("#btn-activation").removeAttr('disabled');
} else {
$("#btn-activation").attr("disabled", "disabled");
}
});
这里它主要检查 #chkTerms 是否被选中,如果是,则从 #btn-activation 按钮中删除“disabled”属性。无论年龄验证是否真实。
年龄验证字段
if (res != null) {
birth_date = new Date(res[1], res[2] - 1, res[3]);
birth_date.setFullYear(birth_date.getFullYear() + 18);
if (birth_date <= new Date()) {
$("#btn-activation").removeAttr('disabled');
$("#SocialSecurityNumber").removeClass("input-validation-error");
} else {
$("#SocialSecurityNumber").val("").attr("placeholder", "You need to be 18 years or older.").addClass("input-validation-error");
$("#btn-activation").attr("disabled", "disabled");
}
} else {
$("#SocialSecurityNumber").val("").attr("placeholder", "Invalid date").addClass("input-validation-error");
$("#btn-activation").attr("disabled", "disabled");
}
});
在这里你可以看到我的 IF 语句,如果用户超过 18 岁,它会删除“已禁用”,如果不是,则会添加“已禁用”
现在,如果年龄无效,您可以选中复选框并激活提交按钮,我只希望当这两个语句都为真时它被激活。
编辑:
$("#ChkTerms").prop('checked', false);
$("#ChkTerms").click(function () {
if ($('#ChkTerms').is(":checked") && ValidateAge()) {
$("#btn-activation").removeAttr('disabled');
} else {
$("#btn-activation").attr("disabled", "disabled");
}
});
function ValidateAge() {
$("#SocialSecurityNumber").attr("placeholder", "YYYY-MM-DD-XXXX").blur(function () {
var str = $('#SocialSecurityNumber').val();
var res = /^([1-2]\d{3})\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])\-([0-9]{4})$/.exec(str);
var todays_date = new Date();
var birth_date = null;
if (res != null) {
birth_date = new Date(res[1], res[2] - 1, res[3]);
birth_date.setFullYear(birth_date.getFullYear() + 18);
if (birth_date <= new Date()) {
// $("#btn-activation").removeAttr('disabled');
$("#SocialSecurityNumber").removeClass("input-validation-error");
return true;
} else {
$("#SocialSecurityNumber").val("").attr("placeholder", "You need to be 18 years or older.").addClass("input-validation-error");
// $("#btn-activation").attr("disabled", "disabled");
return false;
}
} else {
$("#SocialSecurityNumber").val("").attr("placeholder", "Invalid date").addClass("input-validation-error");
// $("#btn-activation").attr("disabled", "disabled");
return false;
}
});
}
return ValidateAge()
最佳答案
这是一个简单的解决方案
将您的年龄验证代码放入 ValidateAge()
函数中,该函数根据结果返回 true 或 false,并且不会启用和禁用您的按钮。
并将您的复选框点击代码更改为:
$("#ChkTerms").click(function () {
if ($('#ChkTerms').is(":checked") && ValidateAge()) {
$("#btn-activation").removeAttr('disabled');
} else {
$("#btn-activation").attr("disabled", "disabled");
}
});
更新 我认为按以下方式稍微更改一下代码会对您有用。
$( document ).ready(function() {
$("#ChkTerms").click(function () {
if ($('#ChkTerms').is(":checked") && ValidateAge()) {
$("#btn-activation").removeAttr('disabled');
} else {
$("#btn-activation").attr("disabled", "disabled");
}
});
});
function ValidateAge() {
var ret = false;
$("#SocialSecurityNumber").attr("placeholder", "YYYY-MM-DD-XXXX").blur(function () {
var str = $('#SocialSecurityNumber').val();
var res = /^([1-2]\d{3})\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])\-([0-9]{4})$/.exec(str);
var todays_date = new Date();
var birth_date = null;
if (res != null) {
birth_date = new Date(res[1], res[2] - 1, res[3]);
birth_date.setFullYear(birth_date.getFullYear() + 18);
if (birth_date <= new Date()) {
$("#SocialSecurityNumber").removeClass("input-validation-error");
ret= true;
} else {
$("#SocialSecurityNumber").val("").attr("placeholder", "You need to be 18 years or older.").addClass("input-validation-error");
ret = false;
}
} else {
$("#SocialSecurityNumber").val("").attr("placeholder", "Invalid date").addClass("input-validation-error");
ret = false;
}
});
return ret;
}
关于javascript - 带有两个 st 的事件提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22380565/