Question

我有以下HTML代码：

// lets monitor the input of values for inputs you can use a class also
  $('input').on('input', function() {
    // added for bit of simplicity or you can directly get valuess
    var step3in1b = $('#step3in1').val();
    var thedate3in2 = $('#step3in2').val();
    if (step3in1b != "" && thedate3in2 != "") {
      // values seems filled remove class  
      $('#step3in1Btn').removeClass('disabled');
    } else {
      // user has emptied some input so add class again.
      $('#step3in1Btn').addClass('disabled');
    }
  });

  
  $(function($){
   $("#step3in1").mask("99/99/9999");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://archive.conductiva.com/files/demos/maskedin/jquery.maskedinput-1.2.2-co.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<div class="field text-left">
  <div class="col-lg-6 col-sm-6 col-xs-12">
    <label class="text-left">Date of Birth</label>
    <input type="text" id="step3in1" name="step3in1b" placeholder="__/__/____" />
  </div>
  <div class="col-lg-6 col-sm-6 col-xs-12">
    <label class="text-left">Telephone Number</label>
    <input type="tel" id="step3in2" name="thedate3in2" placeholder="+32 000 000 000" />
  </div>
</div>
<div class="field">
  <div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
    <div class="col-lg-12 col-sm-12 col-xs-12">
      <a href="#" id="step3in1Btn" class="btn disabled">Next Step</a>
    </div>
  </div>
</div>
</div>
</div>

A链接被用作链接并且已禁用Class ，因此默认情况下它显示为灰色（工作）。当用户填写两个输入字段时，该按钮已删除禁用类。

它似乎是正确的，但它不起作用。有人可以帮忙吗？

Answer 1

您只需使用keyup或focus或blur功能检查用户填写输入后的输入值。

$('input').on('keyup blur focus', function() {
    var step3in1b = $('#step3in1').val();
    var thedate3in2 = $('#step3in2').val();
    if (step3in1b != "" && thedate3in2 != "") {
      $('#step3in1Btn').removeClass('disabled');
    } else {
      $('#step3in1Btn').addClass('disabled');
    }
  });

.disabled {
    color: gray;
    text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field text-left">
  <div class="col-lg-6 col-sm-6 col-xs-12">
    <label class="text-left">Date of Birth</label>
    <input type="text" id="step3in1" name="step3in1b" placeholder="__/__/____" />
  </div>
  <div class="col-lg-6 col-sm-6 col-xs-12">
    <label class="text-left">Telephone Number</label>
    <input type="tel" id="step3in2" name="thedate3in2" placeholder="+32 000 000 000" />
  </div>
</div>
<div class="field">
  <div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
    <div class="col-lg-12 col-sm-12 col-xs-12">
      <a href="#" id="step3in1Btn" class="btn disabled">Next Step</a>
    </div>
  </div>
</div>
</div>
</div>

2场上的jQuery验证

1 个答案: