Jquery表單驗證。禁用輸入，直到其他輸入有效

Question

我有一個2輸入字段的形式，我想第二個輸入字段保持禁用，直到第一個字段有效。

它的工作，但不是我期望的方式。會發生什麼情況是，如果第一個字段驗證，第二個字段已啓用，但如果我單擊第二個字段，則會再次禁用。它只會工作，如果我使用製表鍵

我怎樣才能讓表單工作我期望？

$("#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 { 
    } 
    }); 
}); 

歡呼