Selenium C#：点击隐藏复选框与启用禁用锚点的技术方案

看起来你在处理一个隐藏复选框的交互场景——这种用display:none（通过hide类）隐藏核心复选框，依赖关联的<label>和图标来展示勾选状态、控制锚点可用性的设计，在条款同意这类场景里非常常见。先把你提供的HTML片段补全（还原常见的完整结构）：

<div class="field checkboxes divider-half color-focus"> 
  <input type="checkbox" id="ed_passengers_terms" name="ed_passengers[terms]" required="required" class="form-control hide" value="1" /> 
  <label for="ed_passengers_terms" class="checkbox-label">
    <span class="icon-toggle">
      <i class="icon-unchecked"></i>
      <i class="icon-checked hidden"></i>
    </span>
    <a href="/passenger-terms" class="terms-link disabled">我同意乘客条款</a>
  </label>
</div>

下面分两种方案实现你需要的交互：

纯CSS方案（推荐，无JS依赖） #

利用CSS的兄弟选择器和:checked伪类，就能完成状态切换，无需额外JavaScript：

/* 确保复选框完全隐藏，不占据布局空间 */
.form-control.hide {
  display: none;
  visibility: hidden;
}

/* 图标容器基础样式，对齐文字 */
.icon-toggle {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

/* 默认隐藏勾选状态图标 */
.icon-checked.hidden {
  display: none;
}

/* 复选框勾选时：切换图标显示状态 */
#ed_passengers_terms:checked ~ label .icon-unchecked {
  display: none;
}
#ed_passengers_terms:checked ~ label .icon-checked.hidden {
  display: inline-block;
}

/* 锚点禁用状态：灰化、禁止点击 */
.terms-link.disabled {
  color: #999;
  pointer-events: none;
  text-decoration: none;
  cursor: not-allowed;
}

/* 复选框勾选时：恢复锚点可点击状态 */
#ed_passengers_terms:checked ~ label .terms-link.disabled {
  color: #0066cc;
  pointer-events: auto;
  text-decoration: underline;
}

JavaScript方案（适合复杂交互场景） #

如果你的DOM结构更复杂，纯CSS的兄弟选择器无法覆盖，或者需要额外的交互逻辑（比如勾选后触发弹窗），可以用JS监听复选框的change事件：

// 获取核心元素
const termsCheckbox = document.getElementById('ed_passengers_terms');
const uncheckedIcon = document.querySelector('.icon-unchecked');
const checkedIcon = document.querySelector('.icon-checked');
const termsLink = document.querySelector('.terms-link');

// 监听状态变化
termsCheckbox.addEventListener('change', handleTermsToggle);

// 页面加载时初始化状态（避免刷新后状态错乱）
handleTermsToggle();

function handleTermsToggle() {
  const isChecked = termsCheckbox.checked;
  
  // 切换图标显示
  uncheckedIcon.classList.toggle('hidden', isChecked);
  checkedIcon.classList.toggle('hidden', !isChecked);
  
  // 切换锚点可用性
  termsLink.classList.toggle('disabled', !isChecked);
}

关键注意事项 #

• 因为复选框加了required属性，表单提交时浏览器会自动校验，确保用户必须勾选才能提交，无需额外写校验逻辑。
• 一定要用<label for="ed_passengers_terms">关联复选框，这样用户点击label的任何区域（包括图标、文字）都能切换复选框状态，大幅提升交互友好性。
• 如果是用Vue/React这类框架，可以直接通过数据绑定来控制状态，比如Vue的v-model绑定复选框的checked值，再用v-show控制图标显示、:class控制锚点样式，代码会更简洁易维护。

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