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

}); 

基本上我停止提交第一次然後檢查如果按鈕在提交表單前被禁用。