Попытка отключить текстовое поле ввода, если предыдущее поле осталось пустым

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 Mobile: 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 будет срабатывать сразу после нажатия пользователем клавиши, а значение ввода будет обновляться.

Кроме того, ваш HTML имеет дополнительное закрытие </div> тег, это то, как он должен выглядеть:

<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

вам не нужно функцию each, так как есть только одно текстовое поле. Кроме того, как вы снимаете обновления в этом случае? это обычно должно быть на чем-то вроде события keyup. вы также можете установить отключенное свойство, используя функцию prop (в новых версиях jQuery).

Что-то, как это должно работать (в JQuery 1.6+):

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