3

我有一个脚本可以自动告诉人们他们的新密码何时匹配（帐户激活），但我需要找到一种方法来让它启用提交按钮。

这是我的代码：

JS： 

function checkPasswordMatch() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();

    if (password != confirmPassword) $("#divCheckPasswordMatch").html("<font color=\"red\"><b>Check Passwords</b></font>");
    else $("#divCheckPasswordMatch").html("<font color=\"green\"><b>Passwords Match</b></font>");
}

$(document).ready(function() {
    $("#txtConfirmPassword").keyup(checkPasswordMatch);
});​

HTML

<table>
    <form action="activate_account.php" method="post">
        <tr>
            <td align="right">
                <label for="new_password">Password (6-12 chars):</label>
            </td>
            <td>
                <input type="password" name="new_password" id="new_password" />
            </td>
        </tr>
        <tr>
            <td align="right">
                <label for="new_password2">Again:</label>
            </td>
            <td>
                <input type="password" name="new_password2" id="new_password2" onkeyup="checkPasswordMatch();"
                />
            </td>
        </tr>
        <tr>
            <td>
                <td>
                    <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
                </td>
                <td>
                    <div id="submit">
                        <input type="submit" value="Activate Account" disabled="disabled" />
                    </div>
                </td>
        </tr>
</table>
4

4 回答 4

2

你必须这样做：

$("#buttonActivate").prop("disabled", false);  // to enable the button

之后不要忘记使用此代码，如果用户决定再次更改密码，那么您的按钮将再次变为非活动状态

 $("#buttonActivate").prop("disabled", true); // to disablethe button

只需用这个替换您当前的代码，但不要忘记更新 HTML：

jQuery

$(document).ready(function() {
function checkPasswordMatch() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();

    if (password != confirmPassword) {
        $("#new_password").css("background", "red");
        $("#new_password2").css("background", "red");
        $("#buttonActivate").prop("disabled", true);
        return false;
    } else {
        $("#new_password").css("background", "green");
        $("#new_password2").css("background", "green");
        $("#buttonActivate").prop("disabled", false);
        return true;
    }
}
  $("input").keydown(function() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();
    if (password.length >= 6 && confirmPassword.length >= 6) {  // let's check if the password is >= 6 otherwise there is nothing to check
        checkPasswordMatch();
    }
});

请参阅以下示例中更新的 HTML：

  1. 为您的 ID 设置一个 ID <form>，比方说id="accountActivation"；
  2. input将您的按钮更改为button并为其设置一个 ID：
    <button id="buttonActivate" type="submit" disabled="disabled">Activate Account</button>

jsFiddle 工作示例

更新了 jsFiddle 以显示Passwords mismatch警告

我相信它会为你工作！

于 2012-08-28T21:07:21.420 回答
0

我认为您正在寻找更改属性

$("input[type=submit]").removeAttr("disabled");

请参阅 .removeAttr此处

于 2012-08-28T21:00:40.557 回答
0

要补充 PoX 的答案，如果您使用的是jQuery 1.6或更高版本，您应该使用prop()设置启用和禁用状态的方法：

$("input[type=submit]").prop("disabled", false);
于 2012-08-28T21:07:11.237 回答
0

给你的提交按钮一个 id：

<input id="activateAccountButton" type="submit" value="Activate Account" disabled="disabled" />

然后在您的检查密码功能中添加：

function checkPasswordMatch() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();

    if (password != confirmPassword)
        $("#acivateAccountButton").attr("disabled","disabled");
        $("#divCheckPasswordMatch").html("<font color=\"red\"><b>Check Passwords</b></font>");
    else
        $("#acivateAccountButton").removeAttr("disabled"); 
        $("#divCheckPasswordMatch").html("<font color=\"green\"><b>Passwords Match</b></font>");

}

还要确保您在服务器端进行了验证！！！

于 2012-08-28T21:03:44.013 回答