本文介绍如何通过原生 javascript 动态修改移动端维修预约表单中单选按钮（radio）对应的门店名称，并安全移除冗余选项，适用于 elementor 等可视化编辑器中无法直接编辑动态生成 html 的场景。
本文介绍如何通过原生 javascript 动态修改移动端维修预约表单中单选按钮（radio）对应的门店名称，并安全移除冗余选项，适用于 elementor 等可视化编辑器中无法直接编辑动态生成 html 的场景。
在实际网站维护中，常遇到第三方开发的页面结构固定但内容需灵活调整的情况。例如本例中的手机维修预约页（https://www.php.cn/link/68730bb200e754fff3d3325fdf92e9eb），用户选择“自行送修”后才会显示门店选择区域（.ic-select-store），且该区域由 JavaScript 动态渲染或条件展示，因此直接修改静态 HTML 不生效——必须监听触发时机并操作 DOM。
✅ 正确做法：监听“自行送修”复选框状态，动态更新门店选项
根据提供的代码片段，关键触发点是 value="bring-your-own" 的 radio 按钮（对应“Bring it yourself”选项）。当其被选中时，门店选择区才显示。因此，我们应监听其 change 事件，在回调中执行 DOM 更新：
<script>
document.addEventListener('DOMContentLoaded', function() {
const deliveryRadio = document.querySelector("input[value='bring-your-own']");
if (!deliveryRadio) return; // 防止元素不存在时报错
deliveryRadio.addEventListener('change', function() {
if (this.checked) {
// 1. 获取所有门店容器
const storeContainers = document.querySelectorAll('.ic-single-store');
// 2. 移除第二个门店（Winterswijk）
if (storeContainers.length > 1) {
storeContainers[1].remove();
}
// 3. 更新第一个门店：ID、value 和显示文本
const firstInput = document.getElementById('first_store');
const firstLabel = document.querySelector('label[for="first_store"]');
if (firstInput && firstLabel) {
firstInput.value = 'Barneveld';
// 注意：原 HTML 中 label 内嵌套了 <font> 标签，需确保文本更新到最内层
const targetFont = firstLabel.querySelector('font font') ||
firstLabel.querySelector('font') ||
firstLabel;
targetFont.textContent = 'Barneveld';
}
}
});
});
</script>⚠️ 关键注意事项
- 执行时机：务必包裹在 DOMContentLoaded 中，确保 DOM 已加载完成；若页面使用 AJAX 渲染表单（如 SPA 或 Elementor 动态加载），需改用 MutationObserver 监听 .ic-select-store 出现后再执行。
- HTML 结构兼容性：原始代码中
- ID 唯一性：确保 #first_store 未被重复使用；若页面存在多个同类表单，建议改用更健壮的选择器（如结合父容器 div.ic-select-store input[type="radio"]:first-child）。
- 样式与可访问性：更新 value 属性确保后端接收正确值；同步更新可见文本保证 WCAG 合规性；移除元素前可添加 aria-hidden="true" 过渡处理（非必需但推荐）。
✅ 最终效果验证
- 用户勾选 “Bring it yourself” 后，门店选择区仅显示一项：✅ Barneveld（值为 Barneveld，非 Zutphen）；
- “Winterswijk” 选项完全从 DOM 中移除，不再参与表单提交；
- 其他流程（如条款勾选、提交按钮）不受影响。
此方案无需修改后端模板或依赖 jQuery，轻量、可靠，适用于大多数基于 Elementor、WPBakery 或自定义 JS 渲染的 WordPress 维修预约系统。
