在jquery中禁用并启用了按钮

Question

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

$(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>

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>

Answer 2

小提示：

此处不需要

$(function() {})。您的整个代码周围已经$(document).ready(function() {})。

同样$(function() {})是$(document).ready(function() {})

的缩短版本

你也可以使用jQuery-Method prop()设置或取消设置“禁用”属性，如下所示：

//for readability saved in a variable
var enableButton = $('#target0').val() != '' &&
      $('#target1').val() != '' &&
      $('#target2').val() != '' &&
      $('#target3').val() != '' &&
      $('#target4').val() != '');

$('#sbtbtn').prop('disabled', !enableButton);