JSFiddle - React, Tailwind, and code Playground

HTML

<table>  
    <tbody>                
        <tr>
            <th>Direction</th>
                <td>
                    <select id='work_direction' name="workorder[work_direction]" class='required'>
                        <option value=''>Select</option>
                        <option value="domestic">Domestic</option>
                        <option value="offshore">Offshore</option>
                        <option value="mexico">Mexico</option>
                    </select>
                        <span class='error'></span>
            </td>
        </tr>
    </tbody>
</table>
<br/>

<tr>
                        <th>Departments Affected?</th>
                        <td>
                            <ul style="list-style-type:none;">
                                <li>
                                <span class="error"></span>
                                    <input id="cad" type="checkbox" name="workorder[affect][cad]" class="require-one"/>
                                    <label>Cad (John Doe [1])</label>
                                </li>
                                <li>
                                    <input id="design" type="checkbox" name="workorder[affect][design]" class="require-one" />
                                    <label>Design (John Doe [2])</label>
                                </li>
                                <li>
                                    <input id="shop" type="checkbox" name="workorder[affect][shop]" class="require-one" />
                                    <label>Shop (John Doe [3])</label>
                                </li>
                                <li>
                                    <input id="cnc" type="checkbox" name="workorder[affect][cnc]" class="require-one" />
                                    <label>CNC (John Doe [4])</label>
                                </li>
                                <li>
                                    <input type="checkbox"...

JavaScript

$('#work_direction').on('change', function() {
    if ($(this).val() == 'mexico') {
        $('.shop, .cnc').data('check', 'mexico');
    }
    else {
        $('.shop').data('check', 'shop');
        $('.cnc').data('check', 'cnc');
    }
});

$('.cad, .design, .shop, .cnc').on('change', function() {
    // Split into space-delimited array in case we want
    // to check off more than one
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).attr('checked');
    $.each(elemsToCheck, function() {
        $('#' + this).attr('checked', !!checked);
    });
});