JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<fieldset>
    <legend>1st Fieldset</legend>
    <div>
        <input type="checkbox" name="box_1" value="1" id="box_1_1">
        <label for="box_1_1">1st box</label>
    </div>
    <div>
        <input type="checkbox" name="box_2" value="2" id="box_2_1">
        <label for="box_2_1">2nd box</label>
    </div>
    <div>
        <input type="checkbox" name="box_3" value="3" id="box_3_1">
        <label for="box_3_1">3rd box</label>
    </div>
    <div>
        <input type="checkbox" name="box_4" value="4" id="box_4_1">
        <label for="box_4_1">4th box</label>
    </div>
</fieldset>
<fieldset>
    <legend>2nd Fieldset</legend>
    <div>
        <input type="checkbox" name="box_1" value="1" id="box_1_2">
        <label for="box_1_2">1st box</label>
    </div>
    <div>
        <input type="checkbox" name="box_2" value="2" id="box_2_2">
        <label for="box_2_2">2nd box</label>
    </div>
    <div>
        <input type="checkbox" name="box_3" value="3" id="box_3_2">
        <label for="box_3_2">3rd box</label>
    </div>
    <div>
        <input type="checkbox" name="box_4" value="4" id="box_4_2">
        <label for="box_4_2">4th box</label>
    </div>
</fieldset>
<fieldset>
    <legend>3rd Fieldset</legend>
    <div>
        <input type="checkbox" name="box_1" value="1" id="box_1_3">
        <label for="box_1_3">1st box</label>
    </div>
    <div>
        <input type="checkbox" name="box_2" value="2" id="box_2_3">
        <label for="box_2_3">2nd box</label>
    </div>
    <div>
        <input type="checkbox" name="box_3" value="3" id="box_3_3">
        <label for="box_3_3">3rd box</label>
    </div>
    <div>
        <input type="checkbox" name="box_4" value="4" id="box_4_4">
        <label for="box_4_3">4th box</label>
    </div>
</fieldset>
<fieldset>
    <legend>4th Fieldset</legend>
    <div>
        <input type="checkbox" name="box_1" value="1" id="box_1_4">
        <label for="box_1_4">1st box</label>
    </div>
    <div>
        <input...

CSS

fieldset {
    border:1px solid black;
    margin: 5px;
    padding: 5px;
}

.disabled {
    color: #888;
}

JavaScript

$('input[type=checkbox]').change(function(){
    name = $(this).attr('name');
    id = $(this).attr('id');
    checked = $(this).attr('checked');
    $('input[type=checkbox][name='+name+']:not(#'+id+')')
        .attr('disabled',checked)
        .each(function(){
            lid = $(this).attr('id');
            if (checked) {
                $('label[for='+lid+']').addClass('disabled');
            } else {
                $('label[for='+lid+']').removeClass('disabled');
            }
        });
        
});