Question

I am working disabling the middle name field if the first name field is not filled out first. I have the following code, which disables this in my jQuery Mobile application, but the input is still able to add text to even if the first name is blank and the middle name field stays greyed out if the first name field is filled out. Any help is greatly appreciated. Thanks!

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 has it’s own helper methods for disabling/enabling form elements that have been initialized by the jQuery Mobile framework: 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);
});

Here is a demo: http://jsfiddle.net/ycUnv/

You can use whatever event you like; change will fire once the text input has been blurred and it’s value has changed, keyup will fire just after the user presses a key and the value of the input is updated.

Also, your HTML has an extra closing </div> tag, this is how it should look:

<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>