密码匹配时，javascript禁用/启用提交按钮

Question

我有这个HTML

> <div class="row">
>                     <div class="col-xs-6 col-sm-6 col-md-6">
>                         <div class="form-group">
>                             <input type="password" name="pass1" id="pass1" class="form-control input-lg" placeholder="Password"
> tabindex="3">
>                         </div>
>                     </div>
>                     <div class="col-xs-6 col-sm-6 col-md-6">
>                         <div class="form-group">
>                             <input type="password" name="pass2" id="pass2"  onkeyup="checkPass(); return false;" class="form-control
> input-lg" placeholder="Confirm Password ">
>                            <span id="confirmMessage" class="confirmMessage"></span>
>                       </div>
>                       
>                     </div>
>                   
>                 </div>
>                 
>                 <div class="row">
>                     <input type="submit" id="login" value="Register">
>                   </div>

我该如何做这样的事情：

密码为空时，应禁用提交（disabled =“ disabled”）。

在密码中输入某些内容时，将禁用禁用的属性。

如果密码字段再次为空（文本已删除），则应再次禁用提交按钮。

如果密码不匹配，则应禁用提交按钮

我尝试过这样的事情：

 <script type="text/javascript">
function checkPass()
{
    //Store the password field objects into variables ...
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    //Store the Confimation Message Object ...
    var message = document.getElementById('confirmMessage');
    //Set the colors we will be using ...
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    //Compare the values in the password field 
    //and the confirmation field
    if(pass1.value == pass2.value){
        //The passwords match. 
        //Set the color to the good color and inform
        //the user that they have entered the correct password 
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "Passwords Match!"
    }else{
        //The passwords do not match.
        //Set the color to the bad color and
        //notify the user.
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Passwords Do Not Match!"
        $("#submit").attr("disabled", "disabled");
    }
}  
</script>

javascript显示消息，如果密码匹配或不匹配，但是我的问题是当密码不匹配时，SUBMIT按钮仍然可以继续并提交。

Answer 1

您必须更改元素属性，而不是属性：

 $(document).ready(function() { var isDisabled = false; $('#toggler').click(function() { isDisabled = !isDisabled; $('#submit').prop('disabled', isDisabled); }); $('form').submit(function(e) { e.preventDefault(); alert('Submiting'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" method="post"> <button type="button" id="toggler">Disable/Enable</button> <button type="submit" id="submit">Submit</button> </form> 

Answer 2

使用类似的东西：

if (pass1.value && pass2.value && pass1.value == pass2.value) {
    pass2.style.backgroundColor = goodColor;
    message.style.color = goodColor;
    message.innerHTML = "Passwords Match!"
    $("#submit").prop("disabled", false);
} else {
    pass2.style.backgroundColor = badColor;
    message.style.color = badColor;
    message.innerHTML = "Passwords Do Not Match!"
    $("#submit").prop("disabled", true);
}

我添加了两个长度检查（如果value为"" ，则其评估为false），并在两个字符串匹配时添加了#prop()调用以启用按钮。

Answer 3

抱歉，我无法发表评论，我会回答，如果您有表格（虽然我看不到，但我假设您有活动），您可以这样做

 $("#form").on('submit', function(e) {
  e.preventDefault();
    if(!$('#submit').prop('disabled')){
                $(this).submit();
     }

});

基本上，我首先停止提交，然后在提交表单之前检查按钮是否已禁用。