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

Question

我有这个网站

> <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> 

我怎样才能做这样的事情：

当密码为空提交应被禁用（禁用=“禁用“）。

当在passsword中输入某些内容以删除禁用的属性时。

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

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

我想是这样的：

<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

使用的东西：

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); 
} 

我添加了两个长度检查（如果值是""其被评估为假），并添加#prop()呼叫启用按钮，当两个字符串匹配。

Answer 2

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

$(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 3

对不起，因为我无法评论，我会回答，而不是 如果你有一个表单（我假设你做事件虽然我看不到它），你可以这样做

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

}); 

基本上我停止提交第一次然后检查如果按钮在提交表单前被禁用。