Question

这是我的脚本

$("#reg_confirm_pass").blur(function(){
var user_pass= $("#reg_pass").val();
var user_pass2=$("#reg_confirm_pass").val();
var enter = $("#enter").val();

        if(user_pass.length == 0){
            alert("please fill password first");
            enter.disabled = true;
        } else if (user_pass == user_pass2 ){
            enter.disabled = false;
        } else {
            enter.disabled = true;
            alert("Your password doesn't same");
        }

    });

这是我的HTML

Password : <input  type="password" name="user[user_pass]" id="reg_pass"  required="required">
Confirm password <input type="password" name="user[user_confirm_pass]" id="reg_confirm_pass" required="required">
<button type="submit" id="enter" disabled="true" value="Register">Register</button>

我是Javascript和jQuery的新手，这是我第一次使用jquery。如果密码不匹配，我需要制作一个禁用按钮但是，在我输入相同的密码后，按钮仍然被禁用。

Answer 1

$("#reg_confirm_pass").blur(function() {
  var user_pass = $("#reg_pass").val();
  var user_pass2 = $("#reg_confirm_pass").val();
  //var enter = $("#enter").val();

  if (user_pass.length == 0) {
    alert("please fill password first");
    $("#enter").prop('disabled',true)//use prop()
  } else if (user_pass == user_pass2) {
    $("#enter").prop('disabled',false)//use prop()
  } else {
    $("#enter").prop('disabled',true)//use prop()
    alert("Your password doesn't same");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Password :
<input type="password" name="user[user_pass]" id="reg_pass" required="required">Confirm password
<input type="password" name="user[user_confirm_pass]" id="reg_confirm_pass" required="required">
<button type="submit" id="enter" disabled="true" value="Register">Register</button>

使用.prop（）

Answer 2

你需要在jquery $（“＃enter”）中设置这样的禁用属性.attr（'disabled'，true）;

if(user_pass.length == 0){
        alert("please fill password first");
        $("#enter").attr('disabled',true);
    } else if (user_pass == user_pass2 ){
        $("#enter").attr('disabled',false);
    } else {
        $("#enter").attr('disabled',true);
        alert("Your password doesn't same");
    }

Answer 3

.prop（propertyName，value）允许您为匹配元素集设置一个或多个属性。

JS

$(function() {
  $("#reg_confirm_pass").blur(function() {
    var user_pass = $("#reg_pass").val();
    var confirm_user_pass = $("#reg_confirm_pass").val();
    var enter = $("#enter");

    if (user_pass.length == 0) {
      alert("please fill password first");
      enter.prop('disabled', true)
    } 
    else if (user_pass == confirm_user_pass) {
      enter.prop('disabled', false)
    } 
    else {
      enter.prop('disabled', true)
      alert("Your password doesn't match");
    }
  });
});

HTML

Password: <input type="password" name="user[user_pass]" id="reg_pass"  required="required">
Confirm password: <input type="password" name="user[user_confirm_pass]" id="reg_confirm_pass" required="required">
<button type="submit" id="enter" disabled="true" value="Register">Register</button>

Answer 4

我相信其他答案是正确的。我设置了一个简单的＆＃39; jsfiddle＆＃39;使用jquery及其.prop（）方法来更好地说明here。

注意：我可能会绑定到另一个事件，以便在对任一输入元素进行更改时触发它。

$("#reg_confirm_pass").blur(function(){
var user_pass= $("#reg_pass").val();
var user_pass2=$("#reg_confirm_pass").val();
var enter = $("#enter").val();

    if(user_pass.length == 0){
        alert("please fill password first");
        $("#enter").prop('disabled',true);
    } else if (user_pass == user_pass2 ){
        $("#enter").prop('disabled',false);
    } else {
        $("#enter").prop('disabled',true);
        alert("Your password doesn't same");
    }

});

Answer 5

实际上，blur不会立即启用该按钮，keyup事件处理程序会尽力而为。这是下面的代码。

$("#reg_pass").keyup(function () {
    var user_pass = $("#reg_pass").val();
    var user_pass2 = $("#reg_confirm_pass").val();

    if (user_pass == user_pass2) {
      $("#enter").prop('disabled', false)//use prop()
    } else {
      $("#enter").prop('disabled', true)//use prop()
    }
  });

  $("#reg_confirm_pass").keyup(function () {
    var user_pass = $("#reg_pass").val();
    var user_pass2 = $("#reg_confirm_pass").val();

    if (user_pass == user_pass2) {
      $("#enter").prop('disabled', false)//use prop()
    } else {
      $("#enter").prop('disabled', true)//use prop()
    }
  });

在这里它立即响应两个文本框中的任何更改。 Check it here。

任何比这更好的解决方案，请告诉我。谢谢。

密码匹配时启用按钮

5 个答案:

JS

HTML