Versuch, ein Texteingabefeld zu deaktivieren, wenn das vorherige Feld leer ist

Question

Ich arbeite daran, das Feld für den zweiten Vornamen zu deaktivieren, wenn das Feld für den ersten Namen nicht ausgefüllt wird. Ich habe den folgenden Code, der dies in meiner jQuery Mobile-Anwendung deaktiviert, aber die Eingabe ist immer noch in der Lage, Text hinzuzufügen, auch wenn der Vorname leer ist und das Feld für den mittleren Namen ausgegraut bleibt, wenn das Vorname-Feld ausgefüllt ist. Jede Hilfe wird sehr geschätzt. Vielen Dank!

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 hat seinen eigenen Hilfsmethoden für deaktivieren/aktivieren Formularelemente, die durch die jQuery Mobile Framework initialisiert wurden: http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/textinputs/methods.html

Hier

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

ist eine Demo: http://jsfiddle.net/ycUnv/

können Sie verwenden, was Ereignis Sie mögen; wird ausgelöst, sobald die Texteingabe verwischt wurde und der Wert sich geändert hat. keyup wird ausgelöst, sobald der Benutzer eine Taste drückt und der Wert der Eingabe aktualisiert wird.

Auch Ihre HTML hat einen extra Schließen </div>-Tag, das ist, wie es aussehen soll:

<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

Sie sollten die each Funktion nicht benötigen, da nur ein Textfeld ist. Wie feuern Sie die Updates in diesem Fall? Dies muss in der Regel auf etwas wie ein keyup Ereignis sein. Sie können die deaktivierte Eigenschaft auch mithilfe der Funktion prop (in neueren Versionen von jQuery) festlegen.

So etwas sollte (in jQuery 1.6 +) arbeiten:

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