JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

<div data-role="page">
    <div data-role="content">
        <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>
    </div>
</div>

JavaScript

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