如何仅用HTML与CSS实现勾选任意单个复选框时启用提交按钮？

无需编写任何脚本代码，完全可以通过HTML结构搭配CSS伪类选择器实现你要的交互效果。

结构调整前提 #

受CSS选择器规则限制，它无法选中位于元素前面的兄弟节点，因此DOM结构需要按照「所有同组复选框 → 提交/跳转按钮」的顺序排列，保证按钮放在所有复选框的后面，才能被复选框的状态联动控制。
你现有的复选框代码不需要修改，直接沿用即可。

完整代码示例 #

HTML 部分 #

<!-- 所有同组复选框放在最前面，这里包含你提供的现有代码 -->
<input type="checkbox" id="number1" name="number1" value="1">
<label for="number1">01 </label>

<input type="checkbox" id="number2" name="number2" value="2">
<label for="number2">02 </label>

<input type="checkbox" id="number3" name="number3" value="3">
<label for="number3">03 </label>

<!-- 提交/跳转按钮放在所有复选框的后方 -->
<button id="submitBtn" disabled>提交/跳转站点</button>

CSS 部分 #

/* 按钮默认禁用状态的样式 */
#submitBtn {
  background: #ccc;
  color: #999;
  border: 1px solid #ddd;
  cursor: not-allowed;
  pointer-events: none; /* 默认禁止点击交互 */
}

/* 任意一个同组复选框被勾选时，激活后方的按钮 */
input[type="checkbox"]:checked ~ #submitBtn {
  background: #1677ff;
  color: #fff;
  border: 1px solid #1677ff;
  cursor: pointer;
  pointer-events: auto; /* 开放按钮的点击权限 */
}

效果匹配说明 #

• 逻辑完全匹配需求：只要任意一个同组复选框被勾选，就会立刻触发按钮的激活状态，不需要多个复选框同时选中
• 不需要单独给每个复选框写联动规则，后续如果要新增同组的复选框，只要放在按钮前面，激活逻辑会自动生效
• 样式部分可以根据自己页面的视觉风格随意调整，不会影响交互逻辑

注意：该方案仅控制按钮的可点击状态展示，不会改动按钮本身绑定的提交、跳转原有逻辑。

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