JSFiddle - React, Tailwind, and code Playground

HTML

<table> <tr>
            <th>Early Morning<br /><small>6am-9am</small></th>
                <td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_871_0" value="Early Morning 6am-9am Monday"></td>
                <td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_872_1" value="Early Morning 6am-9am Tuesday"></td>
                <td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_873_2" value="Early Morning 6am-9am Wednesday"></td>
                <td><input type="checkbox" class="lateAfternoon" name="field_807[]" id="field_874_3" value="Early Morning 6am-9am Thursday"></th>
                <td><input type="checkbox" class="earlyEvening" name="field_807[]" id="field_875_4" value="Early Morning 6am-9am Friday"></td>
                <td><input type="checkbox" class="lateEvening" name="field_807[]" id="field_876_5" value="Early Morning 6am-9am Saturday"></td>
                <td><input type="checkbox" class="overnight" name="field_807[]" id="field_877_6" value="Overnight 12am-6am Sunday"></td>
            </tr>

            <tr>
            <th>Late Morning<br /><small>9am-12pm</small></th>
                <td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_878_7" value="Late Morning 9am-12pm Monday"></td>
                <td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_879_8" value="Late Morning 9am-12pm Tuesday"></td>
                <td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_880_9" value="Late Morning 9am-12pm Wednesday"></td>
                <td><input type="checkbox" class="lateAfternoon" name="field_807[]" id="field_881_10" value="Late Morning 9am-12pm Thursday"></th>
                <td><input type="checkbox" class="earlyEvening" name="field_807[]" id="field_882_11" value="Late Morning 9am-12pm Friday"></td>
                <td><input type="checkbox" class="lateEvening" name="field_807[]"...

JavaScript

/*
SO
http://stackoverflow.com/questions/23128250/how-to-change-checkboxes-to-behave-like-radio-button-using-jquery
*/
$("table").on("click", 'input[type="checkbox"]', function () {
    $(this).change(function() {
        // Up to TR, uncheck all the checkboxes in this row and check the one that was clicked
        $(this).parent().parent().find('input[type="checkbox"]').prop('checked',false);
        $(this).prop('checked',true);
    });
});