jquery - jquery中的禁用和启用按钮

Question

我希望在某些字段为空时禁用我的提交按钮，并在填写必填字段时启用。就我而言，当我从选项中选择提交按钮仍未启用时，我正在使用带有一些选项的选择标签。

$(document).ready(function() {

  $(function() {
    $('#sbtbtn').attr('disabled', 'disabled');
  });

  $('input[type=text],input[type=password],input[type=text]').keyup(function() {

    if (


      $('#target0').val() != '' &&
      $('#target1').val() != '' &&
      $('#target2').val() != '' &&
      $('#target3').val() != '' &&
      $('#target4').val() != '') {

      $('#sbtbtn').removeAttr('disabled');
    } else {
      $('#sbtbtn').attr('disabled', 'disabled');
    }
  });
});

<title>Disable submit button until all form's fields are filled</title>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

<div id="myDiv">
  <center>
    <form action="#" id="Once">
      <table border="1">
        <tr>
          <td><strong>Sex:</strong></td>
          <td>
            <select type="select" name="sex" id="target0">
              <option></option>
              <option>male</option>
              <option>female</option>
            </select>
        </tr>
        <tr>
          <td><strong>username:</strong></td>
          <td><input type="text" name="username" id="target1" />
        </tr>
        <tr>
          <td><strong>password:</strong></td>
          <td><input type="password" name="password" id="target2" />
        </tr>
        <tr>
          <td><strong>Confirm password:</strong></td>
          <td><input type="password" name="password2" id="target3" />
        </tr>
        <tr>
          <td><strong>Email</strong></td>
          <td><input type="text" name="email" id="target4" />
        </tr>
        <tr>
          <td colspan="2">
            <center><input type="submit" value="submit" id="sbtbtn" /></center>

          </td>
        </tr>
      </table>

    </form>
  </center>
</div>

标签： jqueryhtml

Answer 1

您没有会触发代码的事件select change。尝试以下操作：

$('input[type=text],
   input[type=password],
   input[type=text],
   select').on("keyup change",function() {

演示

$(document).ready(function() {

  $(function() {
    $('#sbtbtn').attr('disabled', 'disabled');
  });

  $('input[type=text],input[type=password],input[type=text],select').on("keyup change",function() {

    if ($('#target0').val() != '' &&
      $('#target1').val() != '' &&
      $('#target2').val() != '' &&
      $('#target3').val() != '' &&
      $('#target4').val() != '') {

      $('#sbtbtn').removeAttr('disabled');
    } else {
      $('#sbtbtn').attr('disabled', 'disabled');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
  <center>
    <form action="#" id="Once">
      <table border="1">
        <tr>
          <td><strong>Sex:</strong></td>
          <td>
            <select type="select" name="sex" id="target0">
              <option></option>
              <option>male</option>
              <option>female</option>
            </select>
        </tr>
        <tr>
          <td><strong>username:</strong></td>
          <td><input type="text" name="username" id="target1" />
        </tr>
        <tr>
          <td><strong>password:</strong></td>
          <td><input type="password" name="password" id="target2" />
        </tr>
        <tr>
          <td><strong>Confirm password:</strong></td>
          <td><input type="password" name="password2" id="target3" />
        </tr>
        <tr>
          <td><strong>Email</strong></td>
          <td><input type="text" name="email" id="target4" />
        </tr>
        <tr>
          <td colspan="2">
            <center><input type="submit" value="submit" id="sbtbtn" />

          </td>

    </form>
    </center>
</div>