Jquery форма проверка. Отключить ввод до тех пор, пока не будет проверен другой вход

Question

У меня есть форма с двумя полями ввода, и я хочу, чтобы второе поле ввода оставалось отключенным до тех пор, пока не будет выполнено первое поле.

Это работает, но не так, как я ожидаю. Что происходит, если первое поле проверяется, второе поле включено, но если я нажму во втором поле, он снова отключится. Он будет работать, только если я использую клавишу табуляции

Как я могу получить форму для работы, как я ожидаю?

$("#bin").prop('disabled', true); 
    $('#prefix').addClass('field_disabled'); 
    $('span').addClass('field_disabled'); 

    $('#toteform').bind('change keyup', function() { 
     if($(this).validate().checkForm()) { 
      $('#prefix').removeClass('field_disabled'); 
      $('span').removeClass('field_disabled'); 
      $('#bin').removeClass('field_disabled').prop('disabled', false); 
     } else {  
      $('#prefix').addClass('field_disabled'); 
      $('span').addClass('field_disabled'); 
      $('#bin').addClass('field_disabled').prop('disabled', true); 
     } 
    }); 

    $('#form_result').hide(); 

    // validate the comment form when it is submitted 
    $("#toteform").validate({ 
     errorLabelContainer: '#errors', 
     rules: { 
      tote: { 
       required: true, 
       number: true, 
       minlength: 4 
      }, 
      bin: { 
       required: true 
      } 
     } 
    }); 
}); 

и HTML

<div id="main_div" class="container frame" style="text-align:center;"> 
     <div id="msgcontainer"> 
      <div id="errors"></div> 
      <div id="form_result">Tote successfully added!!</div> 
     </div> 
     <form id="toteform" method="post" action=""> 
      <p><label>Tote Number:</label> 
      <input type="text" name="tote" id="tote" maxlength="4" autocomplete="off" autofocus tabindex="1" /></p> 
      <p><label>Bin Number:</label></p> 
      <div id="prefix"><span>J</span><input type="text" name="bin" id="bin" maxlength="4" autocomplete="off" tabindex="2" /></div> 
      <input type="submit" name="submit" class="submit" id="submit" value="Submit tote number" tabindex="3" /> 
     </form> 
</div> 

Answer 1

не видя HTML трудно, но посмотрите на этом простом примере. Fiddle в основном у меня есть 2 входа:

<input type="text" id="form_1" placeholder="here"> 
<input type="text" id="form_2" placeholder="disable" class="not_valid" disabled> 

и вызов Jquery (как ваша для логики проверки, кроме)

$(document).ready(function() { 
    $('#form_1').bind('change keyup', function() { 
    // Your validation 
    var length_var = $(this).val().length; 
    if(length_var > 3) { 
     $('#form_2').removeAttr('disabled');  
    } else { 
    } 
    }); 
}); 

приветствий