前のフィールドが空白の場合にテキスト入力フィールドを無効にしようとしています

Question

最初のフィールドが最初に入力されていない場合は、中名フィールドを無効にする作業をしています。私は、jQuery Mobileアプリケーションでこれを無効にする次のコードを持っていますが、ファーストネームフィールドが空白で、最初のフィールドが記入されている場合はミドルネームフィールドがグレー表示のままであっても、入力は引き続きテキストを追加できます。どんな助けでも大歓迎です。ありがとう！

HTML：

<form id="search-form" name="search-form" method="post"> 
     <div class="formBox"> 
     <div data-role="fieldcontain"> 
      <label for="firstName">First Name</label><br/> 
      <input type="text" name="firstname" id="firstNameCriteria" value="" /> 
     </div> 
     <div data-role="fieldcontain"> 
      <label for="middleName">Middle Name</label><br/> 
      <input type="text" name="middleName" id="middleNameCriteria" value="" /> 
     </div> 
     <div data-role="fieldcontain"> 
      <label for="lastName">Last Name <span class="required">(Required - Must be exact match)</span></label><br/> 
      <input type="text" name="lastname" id="lastNameCriteria" value="" /> 
     </div> 
     </div> 

     </div> 
    </form> 

JS：

$('#firstNameCriteria').each(function() { 
     if ($(this).val() == '') { 
      $('#middleNameCriteria').addClass('ui-disabled'); 
      $('#middleNameCriteria').disable('input'); 
     } else { 
      $('#middleNameCriteria').removeClass('ui-disabled'); 
     } 
    }); 

Answer 1

のjQuery MobileはjQueryのモバイルフレームワークによって初期化されたフォーム要素を有効/無効にするためのそれ自身のヘルパーメソッドがあります。http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/textinputs/methods.html

ここで

//bind event handler to first text input 
$('#firstNameCriteria').bind('keyup', function() { 

    //enable or disable the next element based on the value of this one 
    var state = (this.value == '') ? 'disable' : 'enable'; 
    $("#middleNameCriteria").textinput(state); 
}); 

はデモです：http://jsfiddle.net/ycUnv/

あなたが好きなイベントに使用することができます。 changeは、テキスト入力がぼやけて値が変更されると起動します。keyupは、ユーザーがキーを押して入力の値が更新された直後に起動します。私は「はそれぞれ」が必要だと思いませんでしたが、うまくいくものを見つけることができませんでした

<form id="search-form" name="search-form" method="post"> 
    <div class="formBox"> 
     <div data-role="fieldcontain"> 
      <label for="firstName">First Name</label><br/> 
      <input type="text" name="firstname" id="firstNameCriteria" value="" /> 
     </div> 
     <div data-role="fieldcontain"> 
      <label for="middleName">Middle Name</label><br/> 
      <input type="text" name="middleName" id="middleNameCriteria" value="" /> 
     </div> 
     <div data-role="fieldcontain"> 
      <label for="lastName">Last Name <span class="required">(Required - Must be exact match)</span></label><br/> 
      <input type="text" name="lastname" id="lastNameCriteria" value="" /> 
     </div> 
    </div> 
</form> 

Answer 2

のみ1つのテキストフィールドがあるので、あなたは、each機能を必要はありません。また、あなたはこのケースでどのように更新プログラムを起動していますか？これは通常、keyupイベントのようなものにする必要があります。 prop関数（新しいバージョンのjQuery）を使用してdisabledプロパティを設定することもできます。このような

何かが（1.6+ jQueryの中で）動作するはずです：

$("#firstNameCriteria").keyup(function() { 
    if($(this).val() == '') { 
    $("#middleNameCriteria").addClass('ui-disabled'); 
    $("#middleNameCriteria").prop("disabled", true); 
    } else { 
    $("#middleNameCriteria").removeClass('ui-disabled'); 
    $("#middleNameCriteria").prop("disabled", false); 
    } 
});