在使用 jquery 填写表单之前，如何禁用提交表单按钮？

Question

我已经设法禁用提交按钮，但在输入字段中有文本后它不会重新启用。我怎样才能解决这个问题？    <form>    <div class="col-lg-10 mb-3">      <div class="input-group mycustom">        <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="inputGroupPrepend2" required>        <div class="input-group-prepend">          <input type="submit"  id="register" value="Submit" disabled="disabled"  class="btn btn-secondary btn-sm rounded-0" id="inputGroupPrepend2" />        </div>      </div>    </div>  </form><a href = "highscores.html"> High Scores</a>查询：(function() {$('form > input').keyup(function() {    var empty = false;    $('form > input').each(function() {        if ($(this).val() == '') {            empty = true;        }    });    if (empty) {        $('#register').attr('disabled', 'disabled');     } else {        $('#register').removeAttr('disabled');     }});})()

Answer 1

您的按钮中有多个id's属性submit，因此您的code. 一个 id 是，inputGroupPrepend2另一个是register- 你不能同时输入

到disable按钮use .prop()方法并设置true为是否要禁用以及false何时禁用enable。

$('#register').prop('disabled', true); //disable 

我已经简化了您的工作code并且按预期工作。

$(function() {

  $('input[type=text]').each(function(index, element) {

    $(element).keyup(function() {

      if ($(this).val() == '') {

        $('#register').prop('disabled', true); //disable 

      } else {

        $('#register').prop('disabled', false); //enable

      }

    });

  })

});

现场工作演示：

$(function() {

  $('input[type=text]').each(function(index, element) {

    $(element).keyup(function() {

      if ($(this).val() == '') {

        $('#register').prop('disabled', true); //disable 

      } else {

        $('#register').prop('disabled', false); //enable

      }

    });

  })

});

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<form>

  <div class="col-lg-10 mb-3">

    <div class="input-group mycustom">

      <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="register" required>

      <div class="input-group-prepend">

        <input type="submit" value="Submit" disabled="disabled" class="btn btn-secondary btn-smrounded-0" id="register" />

      </div>

    </div>

  </div>

</form>

<a href="highscores.html"> High Scores</a>

Answer 2

(function() {

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

    var empty = false;

    $('input[type=text]').each(function() {

        if ($(this).val() == '') {

            empty = true;

        }

    });

    if (empty) {

        $('#register').attr('disabled', 'disabled'); 

    } else {

        $('#register').removeAttr('disabled'); 

    }

  })

})()

Answer 3

您可以将代码的底部更新为此。

if (empty) {

            if ($('#register').is(':disabled')) {

                $('#register').removeAttr('disabled');

            } 

            else {

                $('#register').attr('disabled', 'disabled');

            }

  };

Answer 4

> 组合器选择作为第一个元素的直接子节点的节点。

子组合器

您keyup根本没有开火，也$('form > input').each(function() {根本没有选择输入...

(function() {

$('form * input').keyup(function() {

console.log(true);

    var empty = false;

    $('form * input').each(function() {

        if ($(this).val() == '') {

            empty = true;

        }

    });

    if (empty) {

        $('#register').attr('disabled', 'disabled'); 

    } else {

        $('#register').removeAttr('disabled'); 

    }

});

})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>

  <div class="col-lg-10 mb-3">

    <div class="input-group mycustom">

      <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="inputGroupPrepend2" required>

      <div class="input-group-prepend">

        <input type="submit" id="register" value="Submit" disabled="disabled" class="btn btn-secondary btn-sm rounded-0" id="inputGroupPrepend2" />

      </div>

    </div>

  </div>

</form>

<a href="highscores.html"> High Scores</a>