如何用按钮禁用一组复选框？Toggle按钮HTML实现求助

一、提交代码的正确方式 #

在提问时，直接把你已有的HTML（如果涉及JavaScript也要附上）代码用代码块包裹（用三个反引号```开头和结尾，中间放置代码），放在问题描述里，同时说明代码的预期效果、当前遇到的问题或不符合预期的表现，这样别人能快速帮你排查验证。

二、实现“Disable These”切换按钮的示例代码 #

纯HTML无法实现动态切换复选框的禁用状态，需要配合JavaScript完成，以下是完整的可运行示例：

<!-- 额外仪式页面的HTML结构 -->
<div class="extra-rituals-section">
  <h3>额外仪式选项</h3>
  <!-- 切换按钮 -->
  <button id="toggleDisableBtn">Disable These</button>
  
  <!-- 需要控制的复选框组 -->
  <div class="ritual-checkboxes">
    <label><input type="checkbox" class="target-checkbox" value="unity-candle"> 同心烛仪式</label>
    <label><input type="checkbox" class="target-checkbox" value="sand-ritual"> 沙仪式</label>
    <label><input type="checkbox" class="target-checkbox" value="handfasting"> 执手礼</label>
  </div>
</div>

<script>
// 获取按钮和所有目标复选框
const toggleButton = document.getElementById('toggleDisableBtn');
const checkboxes = document.querySelectorAll('.target-checkbox');

// 绑定点击事件，切换禁用状态
toggleButton.addEventListener('click', function() {
  const isDisableMode = toggleButton.textContent === 'Disable These';
  
  // 批量设置复选框的disabled属性
  checkboxes.forEach(box => {
    box.disabled = isDisableMode;
  });
  
  // 更新按钮文本，提示当前状态
  toggleButton.textContent = isDisableMode ? 'Enable These' : 'Disable These';
});
</script>

代码说明 #

• 给按钮设置唯一IDtoggleDisableBtn，方便JavaScript精准获取
• 给需要控制的复选框统一添加类名target-checkbox，实现批量选中
• 通过JavaScript监听按钮点击事件，切换复选框的disabled属性，同时更新按钮文本反馈当前状态

你可以把自己的代码和这个示例对比，或者直接将你的代码以代码块格式贴出，就能让他人帮你确认是否正确。

内容的提问来源于stack exchange，提问作者Annabelle