Question

JavaScript / jQuery新手在这里！

我在这里有以下表格（使用bootstrap的禁用类，抬头）：

编辑：类'禁用'是引导程序中的一个东西，如果它存在与否，它会正确地禁用和启用该按钮。

<form action="" method="post">
<input type="text" id="bio">
<p class="bio-counter"></p>
<input type="text" id="username">
<p class="user-counter"></p>
<input type="submit" class="btn">
</form>

以下脚本（我在头标记中正确包含了jQuery）：

var main = function() {
   $('.bio-counter').text('500');
   $('.user-counter').text('0');
   var postLengthUser = $('#username').val().length;
   var postLengthBio = $('#bio').val().length;
   $('#username').keyup(function() {
     $('.user-counter').text(postLengthUser);
   });
   $('#bio').keyup(function() {
    var charactersLeftBio = 500 - postLengthBio;
    $('.bio-counter').text(charactersLeftBio);
  });
  if(postLengthUser > 6 && postLengthUser < 21) {
    if(postLengthBio >= 0 && postLengthBio < 501) {
      $('.btn').removeClass('disabled');
    } else {
      $('.btn').addClass('disabled');
    }
  } else {
    $('.btn').addClass('disabled');
  }
}

$(document).ready(main);

我遇到了以下问题：

即使我在输入中输入足够的信息，'btn'也不会失去它的禁用状态。
计数器未更新。

我做错了什么？

Answer 1

<script>
    var main = function () {
        var postLengthUser = 0;
        var postLengthBio = 0;

        $('.bio-counter').text(500);
        $('.user-counter').text(0);


        var validate = function () {
            if (postLengthUser > 6 && postLengthUser < 21) {
                if (postLengthBio >= 0 && postLengthBio < 501) {
                    $('.btn').removeClass('disabled');
                } else {
                    $('.btn').addClass('disabled');
                }
            } else {
                $('.btn').addClass('disabled');
            }
        }

        $('#username').keyup(function () {
            postLengthUser = $('#username').val().length;
            $('.user-counter').text(postLengthUser);

            validate();
        });

        $('#bio').keyup(function () {
            postLengthBio = $('#bio').val().length;
            var charactersLeftBio = 500 - postLengthBio;
            $('.bio-counter').text(charactersLeftBio);

            validate();
        });

        validate();
    }

    $(document).ready(main);
</script>

您只在页面加载时验证禁用条件，它应该在每个键盘事件中运行 - 我将其移动到验证功能。
postLengthUser和postLengthBio也仅在页面加载时更新。它们也应该在每次启动事件时更新。

Answer 2

尝试使用：

$('.btn').prop('disabled', true);

和

$('.btn').prop('disabled', false);

代替。

jQuery Counter不工作

2 个答案: