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

代替。