如何实现仅指定两个checkbox勾选时才启用startusing-button按钮？

DevOps 小满

2026-10-2

问题原因

现有代码仅在页面初始化时执行了一次状态判断，没有监听两个指定checkbox的状态变化事件，因此勾选操作不会触发按钮状态更新
原有判断逻辑的if分支为空，就算两个checkbox同时勾选，也没有执行启用按钮的逻辑

解决方案

替换原有JS代码为以下内容即可，该方案仅作用于你指定的3个元素，完全不会影响页面其他checkbox和按钮：

// 获取指定的DOM元素
const ebpDocumentCheckboxid = document.getElementById('document-checkboxid');
const ebpAcceptTermsandCondCheckbox = document.getElementById('accepttermsandcond-checkbox');
const startUsingBtn = document.getElementById('startusing-button');

// 按钮状态更新逻辑
function toggleStartBtnStatus() {
  // 两个checkbox全勾选时按钮可用，否则禁用
  startUsingBtn.disabled = !(ebpDocumentCheckboxid.checked && ebpAcceptTermsandCondCheckbox.checked);
}

// 初始化页面时先设置一次按钮状态
toggleStartBtnStatus();

// 仅给两个指定checkbox绑定状态变更监听
ebpDocumentCheckboxid.addEventListener('change', toggleStartBtnStatus);
ebpAcceptTermsandCondCheckbox.addEventListener('change', toggleStartBtnStatus);