JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="checkbox" name="detailsgiven" id="checker" checked=checked>Enabled?
    <br>
    <input type='text' name="details" id="tb1" value='box1'>
    <br>
    <input type='text' name="details" id="tb2" value='box2'>
    <br>
    <input type='text' name="details" id="tb3" value='box3'>
    <br>
    <br>
    <input type="checkbox" name="detailsgiven" id="checker2">Enabled?
    <br>
    <input type='text' name="details" id="tb4" value='box1'>
    <br>
    <input type='text' name="details" id="tb5" value='box2'>
    <br>
    <input type='text' name="details" id="tb6" value='box3'>
    <br>
</form>

JavaScript

$(document).ready(function () {
    $('input[type=checkbox]').click(function () {
        toggleInputs($(this));
    }).each(function () {
        toggleInputs($(this));
    });
});

function toggleInputs(element) {
    element.nextUntil('input[type=checkbox]').prop('disabled', !element.prop('checked'));
}