Question

So I have 3 select input fields and I was wondering if its possible to disable the other options once they have been selected. ie:

<tr id="row1">
    <th>Row 1</th>
    <td>
        <select>
            <option value="1">1</option>
            <option value="2" selected>2 selected so 1+3 are disabled</option>
            <option value="3">3</option>
        </select>
    </td>
</tr>

<tr id="row2">
    <th>Row 2</th>
    <td>
        <select>
            <option value="1" selected>1 selected 2+3 are disabled</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </td>
</tr>

<tr id="row3">
    <th>Row 3</th>
    <td>
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected>3 (you get it...)</option>
        </select>
    </td>
</tr>

Answer 1

Try this:

$('select').change(function(){
    $(this).find('option:not(:selected)').prop('disabled', true)
})

Demo