JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table>
    <tr>
        <td>Printer: <input type="checkbox" name="printer[0]" value="yes" /></td>
        <td>
            <select name="usage[0][0]">
                <option value="0" selected="selected">Index 0</option>
                <option value="1">Index 1</option>
            </select>
        </td>
        <td>
            <select name="usage[0][1]">
                <option value="0" selected="selected">Index 0</option>
                <option value="1">Index 1</option>
            </select>
        </td>
        <td>
            <select name="usage[0][2]">
                <option value="0" selected="selected">Index 0</option>
                <option value="1">Index 1</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Printer: <input type="checkbox" name="printer[1]" value="yes" /></td>
        <td>
            <select name="usage[1][0]">
                <option value="0" selected="selected">Index 0</option>
                <option value="1">Index 1</option>
            </select>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>Printer: <input type="checkbox" name="printer[2]" value="yes" /></td>
        <td>
            <select name="usage[2][0]">
                <option value="0" selected="selected">Index 0</option>
                <option value="1">Index 1</option>
            </select>
        </td>
        <td>
            <select name="usage[2][1]">
                <option value="0" selected="selected">Index 0</option>
                <option value="1">Index 1</option>
            </select>
        </td>
        <td>
            <select name="usage[2][2]">
                <option value="0" selected="selected">Index 0</option>
                <option value="1">Index 1</option>
            </select>
        </td>
    </tr>
    
</table>

JavaScript

$('input[name^=printer]').change(function(){
    var usage = ($(this).prop('checked')) ? 1 : 0;
    $('select[name^=usage]', $(this).parents('tr')).prop("selectedIndex", usage);
});