JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row smart-form">
    <section class="col col-3">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="selectAll" id="check0" class="checkbox style-0 checkDoc" /> <span>Marcar/Desmarcar todos</span>

            </label>
        </div>
    </section>
</div>
<div class="row smart-form">
    <section class="col col-3">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="docTipo" id="[email protected]" class="checkbox style-0" /> <span>@dt.descricao1</span>

            </label>
        </div>
    </section>
        <section class="col col-3">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="docTipo" id="[email protected]" class="checkbox style-0" /> <span>@dt.descricao2</span>

            </label>
        </div>
    </section>
        <section class="col col-3">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="docTipo" id="[email protected]" class="checkbox style-0" /> <span>@dt.descricao3</span>

            </label>
        </div>
    </section>
</div>

JavaScript

$(document).on('change', '.checkDoc', function () {
    $("input[name=docTipo]").prop({
        checked: this.checked,
        disabled: this.checked
    });
});