<div class="label-chk-wrap">
    <label class="label-chk">
        <input type="checkbox" data-checkbox-all="checkbox1">
        <span>All Check</span>
    </label>
</div>

<div class="label-chk-wrap" data-checkbox="checkbox1">
    <label class="label-chk">
        <input type="checkbox">
        <span>Checkbox</span>
    </label>
    <label class="label-chk">
        <input type="checkbox">
        <span>Checkbox</span>
    </label>
    <label class="label-chk">
        <input type="checkbox">
        <span>Checkbox</span>
    </label>
</div>

<button type="button" id="checkboxBtn" disabled>비활성화</button>

시점에 따른 이벤트

// 전부 체크되었을 때
document.querySelector('#checkbox1').addEventListener('checkbox.checked', function () {
    console.log('checked')
    document.querySelector('#checkboxBtn').removeAttribute('disabled');
    document.querySelector('#checkboxBtn').innerText = '활성화';
})
// 하나라도 체크해제 되었을 때
document.querySelector('#checkbox1').addEventListener('checkbox.unchecked', function () {
    console.log('unchecked')
    document.querySelector('#checkboxBtn').setAttribute('disabled', '');
    document.querySelector('#checkboxBtn').innerText = '비활성화';
})

Component 호출(feat. 비동기)

const checkboxEl = document.querySelector('[data-checkbox="checkbox1"]');
const checkbox = new SKY.Checkbox(checkbox1);