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

```