JSFiddle - React, Tailwind, and code Playground

by D Guillory

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

JavaScript

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