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

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 события. Вы также можете установить свойство disabled с помощью функции 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);
  }
});