遇到条件后，提交按钮未启用

Question

我试图验证表单，并使用jQuery禁用按钮，如果数字小于8，如果它等于8，则启用它。它成功地禁用但未启用。

$(document).ready(function() {
  $("#user_phone").keydown(function(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
      // Allow: Ctrl+A, Command+A
      (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
      // Allow: home, end, left, right, down, up
      (e.keyCode >= 35 && e.keyCode <= 40)) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }
    var number = $(this).val();
    if (number < 8) {
      $('#submit').prop('disabled', true);
    } else if (number == 8) {
      $('#submit').removeAttr('disabled');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container" id="main-container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-4">
      <h1 class="text-center login-title"></h1>
      <div class="account-wall">
        <img class="profile-img" src="../../../../../uploads/almakan/AlMakan-Cafe-Logo.jpg" alt="">
        <form class="form-signin">
          <input type="text" class="form-control" placeholder="Full name" name="user_name" id="user_name" required autofocus>
          <input maxlength="8" type="text" class="form-control" placeholder="Mobile eg 99999999" name="user_phone" id="user_phone" required>
          <input type="submit" id="submit" value="Enter" class="btn btn-lg btn-primary btn-block" />
          <a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

您必须计算字符串的长度。检查

$(document).ready(function() {
  $("#user_phone").keydown(function(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
      // Allow: Ctrl+A, Command+A
      (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
      // Allow: home, end, left, right, down, up
      (e.keyCode >= 35 && e.keyCode <= 40)) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }
    var number = $(this).val();
    if (number.length < 8) {
      $('#submit').prop('disabled', true);
    } else if (number.length == 8) {
      $('#submit').removeAttr('disabled');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container" id="main-container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-4">
      <h1 class="text-center login-title"></h1>
      <div class="account-wall">
        <img class="profile-img" src="../../../../../uploads/almakan/AlMakan-Cafe-Logo.jpg" alt="">
        <form class="form-signin">
          <input type="text" class="form-control" placeholder="Full name" name="user_name" id="user_name" required autofocus>
          <input maxlength="8" type="text" class="form-control" placeholder="Mobile eg 99999999" name="user_phone" id="user_phone" required>
          <input type="submit" id="submit" value="Enter" class="btn btn-lg btn-primary btn-block" />
          <a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 2

var number = $(this).val();的值尚未更改，因为您正在keydown上查看它。将其更改为keyup：https：//jsfiddle.net/webbm/a8ppy8qm/