querySelectorAll not removing class in else block

I am trying to remove/add disable class on checkboxes when edit checkbox is changed, Although my code is working up to if block but when we uncheck the edit checkbox, however, the disable class is not reflecting in else block, I have to attach disable class in querySelector all, as some checkboxes should work stand alone

HTML

<label>
  <input type="checkbox" class="edit-checkbox">
  Edit Checkboxes
</label>
</br>

<input type="checkbox" class="checkbox disable"/>
<input type="checkbox" class="checkbox disable"/>
<input type="checkbox" class="checkbox disable"/>
<input type="checkbox" class="checkbox disable"/>
<input type="checkbox" class="checkbox disable"/>
<input type="checkbox" class="checkbox"/>

Javascript code, on else block, disable class is not working

let el = document.querySelector('.edit-checkbox');
el.addEventListener('change', function(){
  let ele = document.querySelectorAll('.checkbox.disable');

  for(let i = 0; i< ele.length; i++){
    if(el.checked){
      ele[i].classList.remove('disable');
    } else{
      ele[i].classList.add('disable');
      ele[i].checked = false;
    }
  }
})