如何才能实现勾选一个复选框以后，其他被禁用的复选框才能正常使用？

[qq_15591383]

现在有多个复选框，想实现这样的功能，第一个复选框默认是没有被勾选的，当勾选上第一个复选框以后，后边其他所有的复选框状态从disabled变成正常可用的状态，第一个复选框去掉勾选以后，后边其他所有的复选框不管有没有被勾选，都变成disabled的状态。

代码如下：
<script>
$(document).ready(function(){
$("input[name='guanliyuan']").click(function(){
$("input[name='quanxian']").attr("disabled",$(this).is(':checked'))
});
});
</script>

<label class="checkbox-inline"><input type="checkbox" id="sf" name="guanliyuan">管理员身份</label>
<label class="checkbox-inline"><input type="checkbox" name="quanxian" value="" disabled>修改数据</label>
<label class="checkbox-inline"><input type="checkbox" name="quanxian" value="" disabled>查看数据</label>
<label class="checkbox-inline"><input type="checkbox" name="quanxian" value="" disabled>查看成绩</label>
<label class="checkbox-inline"><input type="checkbox" name="quanxian" value="" disabled>数据统计</label>

现在的问题是，第一次勾选第一个复选框的时候，其他复选框还是disabled状态，取消第一个复选框的勾选时，其他复选框才变成了可以勾选的状态，再次勾选第一个复选框的时候，其他复选框又变成了disabled的状态，和我的需求恰好相反。

[囧]

$("input[name='quanxian']").attr("disabled", !$(this).is(':checked'));

[cn00439805]

window.onload = () => {
    let gly = document.querySelector('input[name=guanliyuan]')
    gly.onclick = () => {
        [...document.querySelectorAll('input[name=quanxian]')].forEach(item => gly.checked?item.removeAttribute("disabled"):item.setAttribute("disabled","disabled"))
    }
}

[qq_15591383]

2楼的方法管用

[qq_15591383]

不好意思，我把1楼搞错成2楼了。

[qq_15591383]

我想再加一个功能，就是如果被禁用的复选框变成可用，且有不定数量的复选框被选中后，再次点击第一个复选框，那么刚才被选中的那些复选框全部变成未选中，换句话说，也就是说所有name=quanxian的复选框的状态都变成未选中，这样该如何处理呢？