CODEWITHSUNDEEP
jqueryhtml-table
peterpeng
peterpeng

Reputation: 43

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

Upvotes: 0

Views: 357

Answers (1)

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11601

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

Upvotes: 2

Related Questions