jquery - 当密码匹配时，我需要启用提交按钮。 (jQuery)

Question

我有一个脚本可以在人们的新密码匹配(帐户激活)时自动通知他们，但我需要找到一种方法来让它同时启用提交按钮。

这是我的代码:

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>

Answer 1

你必须这样做:

$("#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. 为您的 <form> 设置一个 ID ，比方说 id="accountActivation" ;
2. 更改您的 input按钮到 button并为其设置一个 ID:
   <button id="buttonActivate" type="submit" disabled="disabled">Activate Account</button>

jsFiddle Working Example

Updated jsFiddle to show Passwords mismatch warning

我相信它对你有用!