Elements mutually disabling

by highdottle

HTML

<table>
    <thead>
        <tr>
            <th>Select Box</th>
            <th>Input Box</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <select id="select1" class="validation-compare">
                    <option value="One">One</option>
                    <option value="Two">Two</option>
                    <option value=""></option>
                </select>
            </td>
            <td>
                <input type="text" id="input2" class="validation-compare" />
            </td>
        </tr>
        <tr>
            <td>
                <select id="select2" class="validation-compare">
                    <option value=""></option>
                    <option value="One">One</option>
                    <option value="Two">Two</option>
                </select>
            </td>
            <td>
                <input type="text" id="input3" value="some values" class="validation-compare" />
            </td>
        </tr>
        <tr>
            <td>
                <select id="select2" class="validation-compare">
                    <option value=""></option>
                    <option value="One">One</option>
                    <option value="Two">Two</option>
                </select>
            </td>
            <td>
                <input type="text" id="input3" value="" class="validation-compare" />
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    border:1px solid #dfdfdf;
    border-spacing: 0px;
    border-collapse: collapse;
    text-align:center;
}
thead th {
    text-align:center;
}
td {
    width: 100px
}

JavaScript

$(document).ready(function () {
    $(".validation-compare").change(runRowValidation);
    console.log("----- change ------");
    $(".validation-compare").each(runRowValidation);
    console.log("----- each ------");
});

function runRowValidation() {
    var $me = $(this),
        $other = $('.validation-compare', $me.closest("tr")).not($me),
        mVal = $me.val(),
        oVal = $other.val();

    if (mVal !== "" && oVal === "") {
        $me.removeAttr('disabled');
        $other.attr('disabled', 1);
    } else if (mVal === "" && oVal !== "") {
        $other.removeAttr('disabled');
        $me.attr('disabled', 1);
    } else {
        $other.removeAttr('disabled');
        $me.removeAttr('disabled');
    }
}