javascript - 带有两个 st 的事件提交按钮

Question

我有一个验证年龄的输入字段和一个复选框，当单击它时，它会激活表单的 #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()

Answer 1

这是一个简单的解决方案

将您的年龄验证代码放入 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;
}