Question

我们正在使用MVC弹出模型，其中有两个文本框SSN编号和DOB（出生日期），我正在使用DOB的datepicker日历，它是只读文本框，对于SSN编号，我手动将数字放在文本中框。当SSN编号和DOB都正确时，我写了下面的代码来启用下一个按钮。但是下面的代码工作不正常，首先我把SSN号码和当我选择使用日历的DOB时，下一步按钮没有启用，请帮我解决这个问题。

$("#SocialSecurityNumber").blur(function () {

        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled", true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });

    $("#SocialSecurityNumber").keyup(function () {
        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled", true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });


    $("#DateofBirth").blur(function () {

        if ($("#DateofBirth").val() !='' && $("#SocialSecurityNumber").val().length == 11) {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled",true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });

    $("#DateofBirth").keyup(function () {
        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }

        else {

            $("#nextSubmit").attr("disabled",true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }
    });

谢谢，和Sandeep

Answer 1

在jquery中，这是你应该如何禁用按钮

$('#id_of_the_button').prop('disabled', true);

启用按钮

$('#pc_add').prop('disabled', false);

你的HTML中的

按钮应该是这样的

<button id="id_of_the_button"> text of the button </button>

在此处回答您的问题：如何实施html文件

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
<script>
$(document).ready(function(){
     $("#SocialSecurityNumber").keyup(function() {
     if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
        $("#nextSubmit").prop('disabled', false);
      } else {
        $("#nextSubmit").prop('disabled', true);
      }
    });

    $('#DateofBirth').change(function() {
         if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
         $("#nextSubmit").prop('disabled', false);
        }else {
            $("#nextSubmit").prop('disabled', true);
        }
    });
});


</script>
</head>
<body>

<h2>This is a heading</h2>
  <form>
    <input type="text" id="SocialSecurityNumber" />
    <input type="date" id="DateofBirth" />
    <button id="nextSubmit" disabled="disabled" class="btn btn-default">Submit</button>
  </form>

</body>

</html>

Answer 2

不要使用blur and keyup个事件，而是在输入时使用change事件。

＆＃13;

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <form>
    <input type="text" id="SocialSecurityNumber" />
    <input type="date" id="DateofBirth" />
    <button id="nextSubmit" disabled="disabled" class="btn btn-default">Submit</button>
  </form>
  <script>
    $("#SocialSecurityNumber").change(function() {
      if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
        $("#nextSubmit").removeAttr("disabled");
        $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
      } else {

        $("#nextSubmit").attr("disabled", true);
        $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

      }

    });


    $("#DateofBirth").change(function() {

      if ($("#DateofBirth").val() != '' && $("#SocialSecurityNumber").val().length == 11) {
        $("#nextSubmit").removeAttr("disabled");
        $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
      } else {

        $("#nextSubmit").attr("disabled", true);
        $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

      }

    });

    $("#DateofBirth").keyup(function() {
      if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
        $("#nextSubmit").removeAttr("disabled");
        $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
      } else {

        $("#nextSubmit").attr("disabled", true);
        $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

      }
    });
  </script>

  <body>

＆＃13;

Answer 3

尝试：

<!-- To disable button -->
$('#ElememtId').prop("disabled",true)

和

<!-- To enable button -->
$('#ElememtId').prop("disabled",false)

如何使用javascript启用和禁用按钮

3 个答案: