jQuery Counter Not Working

Question

JavaScript/jQuery newbie here！

我這裏有如下形式（用引導的傷殘等級，擡起頭）：

編輯：類「禁用」是在引導的事情，不正常禁用和啓用按鈕，如果它的存在或不。

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

1. 你只是在頁面加載驗證禁用條件，應該在每個keyup事件中運行 - 我把它來驗證功能。

2. postLengthUser和postLengthBio僅在頁面加載時更新。他們也應該更新每個關鍵事件。

Answer 2

嘗試使用：

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

和

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

代替。