带有两个 st 的活动提交按钮答案

【问题标题】：active submit button with two st带有两个 st 的活动提交按钮
【发布时间】：2014-03-13 13:46:02
【问题描述】：

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

【问题讨论】：

你能发布 html 或 fiddle 吗？最后将执行哪个活动？ if (res != null) {rec 是什么？

标签： javascript jquery

【解决方案1】：

这是一个简单的解决方案

将您的年龄验证代码放入函数ValidateAge()，它会根据结果返回真或假，并且不会启用和禁用您的按钮。并将您的复选框点击代码更改为：

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

【讨论】：

嗨，我尝试将我的匿名函数包装在函数 ValidateAge () 周围，并使每个 IF 返回 false/true - 并使用了您的代码，但无法使其正常工作。我编辑了我的帖子
我无法理解您的代码，我正在用一个示例更新我的答案。

【解决方案2】：

您可以创建验证函数来检查所有内容并在每个事件处理程序中调用它，如果可以的话 - 更改状态。

function validate(res) {
    var birth_date = new Date(res[1], res[2] - 1, res[3]);
    var birth_date.setFullYear(birth_date.getFullYear() + 18);

    return birth_date <= new Date() && $('#ChkTerms').is(":checked");
}

if (validate(res)) {
    $("#btn-activation").removeAttr('disabled');
}

【讨论】：