在使用 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&nbsp;我已经简化了您的工作code并且按预期工作。$(function() {&nbsp; $('input[type=text]').each(function(index, element) {&nbsp; &nbsp; $(element).keyup(function() {&nbsp; &nbsp; &nbsp; if ($(this).val() == '') {&nbsp; &nbsp; &nbsp; &nbsp; $('#register').prop('disabled', true); //disable&nbsp;&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $('#register').prop('disabled', false); //enable&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; })});现场工作演示：$(function() {&nbsp; $('input[type=text]').each(function(index, element) {&nbsp; &nbsp; $(element).keyup(function() {&nbsp; &nbsp; &nbsp; if ($(this).val() == '') {&nbsp; &nbsp; &nbsp; &nbsp; $('#register').prop('disabled', true); //disable&nbsp;&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $('#register').prop('disabled', false); //enable&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; })});<!-- 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>&nbsp; <div class="col-lg-10 mb-3">&nbsp; &nbsp; <div class="input-group mycustom">&nbsp; &nbsp; &nbsp; <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="register" required>&nbsp; &nbsp; &nbsp; <div class="input-group-prepend">&nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" value="Submit" disabled="disabled" class="btn btn-secondary btn-smrounded-0" id="register" />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></form><a href="highscores.html"> High Scores</a>

Answer 2

(function() {&nbsp; $(document).on('keyup', 'input[type=text]', function(){&nbsp; &nbsp; var empty = false;&nbsp; &nbsp; $('input[type=text]').each(function() {&nbsp; &nbsp; &nbsp; &nbsp; if ($(this).val() == '') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; empty = true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; if (empty) {&nbsp; &nbsp; &nbsp; &nbsp; $('#register').attr('disabled', 'disabled');&nbsp;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $('#register').removeAttr('disabled');&nbsp;&nbsp; &nbsp; }&nbsp; })})()

Answer 3

您可以将代码的底部更新为此。if (empty) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($('#register').is(':disabled')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#register').removeAttr('disabled');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#register').attr('disabled', 'disabled');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; };

Answer 4

> 组合器选择作为第一个元素的直接子节点的节点。子组合器您keyup根本没有开火，也$('form > input').each(function() {根本没有选择输入...(function() {$('form * input').keyup(function() {console.log(true);&nbsp; &nbsp; var empty = false;&nbsp; &nbsp; $('form * input').each(function() {&nbsp; &nbsp; &nbsp; &nbsp; if ($(this).val() == '') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; empty = true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; if (empty) {&nbsp; &nbsp; &nbsp; &nbsp; $('#register').attr('disabled', 'disabled');&nbsp;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $('#register').removeAttr('disabled');&nbsp;&nbsp; &nbsp; }});})()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form>&nbsp; <div class="col-lg-10 mb-3">&nbsp; &nbsp; <div class="input-group mycustom">&nbsp; &nbsp; &nbsp; <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="inputGroupPrepend2" required>&nbsp; &nbsp; &nbsp; <div class="input-group-prepend">&nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" id="register" value="Submit" disabled="disabled" class="btn btn-secondary btn-sm rounded-0" id="inputGroupPrepend2" />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></form><a href="highscores.html"> High Scores</a>