peterpeng peterpeng - 3 months ago 14
jQuery Question

use jquery to change select option when checkbox cell is checked in a table

I have a html table, one column is checkbox, and another column is select option. When the checkbox is selected, I want to set the select option in the same row to be disabled, and when the checkbox is unselected, make the select option in the same row to be enabled.
The jsfiddle demo is here, please help
http://jsfiddle.net/9zyvfzgs/1/

$("table tr td:nth-child(3) input[type=checkbox]").click(function(){
$("table tr td:nth-child(2)").prop('disabled', true);
});

Answer

Try this:

<table>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <select>
                <option>item</option>
            </select>
        </td>
        <td>
            <select class="you-are-my-select">
                <option>item</option>
            </select>
        </td>
        <td>
            <select>
                <option>item</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <select>
                <option>item</option>
            </select>
        </td>
        <td>
            <select class="you-are-my-select">
                <option>item</option>
            </select>
        </td>
    </tr>
</table>

JS

$('input[type=checkbox]').on('change', function() {
    var $this = $(this);

    // option #1
    //$this.closest('tr').find('select.you-are-my-select').prop('disabled', $this.is(':checked'));

    // option #2, if the select always placed (for example) in third column
    $this.closest('tr').find('> td:nth-child(3) select').prop('disabled', $this.is(':checked'));
});

jsfiddle link updated

DEMO