jQuery Counter Не работает

Question

JavaScript/jQuery новичок здесь!

Я следующую форму здесь (с использованием инвалидов класс Bootstrap, в хедз-ап):

EDIT: класс «инвалид» вещь в загрузчике, и не правильно отключить и включить кнопку, если она есть или не.

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

вместо этого.