亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在使用 jquery 填寫表單之前，如何禁用提交表單按鈕？

在使用 jquery 填寫表單之前，如何禁用提交表單按鈕？

炎炎設計 2023-03-24 15:24:58
我已經設法禁用提交按鈕，但在輸入字段中有文本后它不會重新啟用。我怎樣才能解決這個問題？    <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');     }});})()
查看完整描述

4 回答

?
GCT1015

TA貢獻1827條經驗 獲得超4個贊

您的按鈕中有多個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>


查看完整回答
反對 回復 2023-03-24
?
幕布斯7119047

TA貢獻1794條經驗 獲得超8個贊

(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'); 

    }

  })

})()


查看完整回答
反對 回復 2023-03-24
?
嚕嚕噠

TA貢獻1784條經驗 獲得超7個贊

您可以將代碼的底部更新為此。


if (empty) {

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

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

            } 

            else {

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

            }

  };


查看完整回答
反對 回復 2023-03-24
?
暮色呼如

TA貢獻1853條經驗 獲得超9個贊

> 組合器選擇作為第一個元素的直接子節點的節點。

子組合器

您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>


查看完整回答
反對 回復 2023-03-24
  • 4 回答
  • 0 關注
  • 205 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號