如何实现点击特定Checkbox触发JS代码，动态设置表单字段必填性

需求：点击表单内特定Checkbox后，将随之显示的输入字段设为必填（该字段默认处于可选状态）。

我尝试了以下代码，但未达到预期效果：

function updateRequirements() {
  var escortWrapper = document.querySelector(".elementor-field-type-html .elementor-field-group .elementor-column .elementor-field-group-field_ceffa28 .elementor-col-100");
  if (escortWrapper.style.display != 'none') {
    document.getElementById('escort').required = true;
  } else {
    document.getElementById('escort').required = false;
  }
}

问题分析与修复方案 #

原代码仅通过行内style.display判断元素显示状态，但Elementor通常通过添加/移除CSS类（如elementor-hidden）来控制元素显隐，而非直接修改行内样式，导致判断逻辑失效。同时缺少Checkbox的事件绑定，无法触发状态更新。

修正后的代码如下：

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
  // 定位目标Checkbox（这里以第二个Checkbox为例，可根据实际DOM结构调整选择器）
  const targetCheckbox = document.querySelector('input[type="checkbox"]:nth-of-type(2)');
  const escortWrapper = document.querySelector(".elementor-field-group-field_ceffa28 .elementor-col-100");
  const escortInput = document.getElementById('escort');

  // 更新必填状态的核心逻辑
  function updateRequirements() {
    // 检查元素是否被Elementor的隐藏类标记
    const isVisible = !escortWrapper.classList.contains('elementor-hidden');
    escortInput.required = isVisible;
  }

  // 页面初始化时同步一次状态
  updateRequirements();

  // 绑定Checkbox的切换事件
  if (targetCheckbox) {
    targetCheckbox.addEventListener('change', updateRequirements);
    
    // 监听元素类名变化，兼容Elementor的JS动态切换
    const observer = new MutationObserver(updateRequirements);
    observer.observe(escortWrapper, { attributes: true, attributeFilter: ['class'] });
  }
});

补充说明 #

• 若目标Checkbox的选择器不准确，可通过其name属性、自定义类或父容器特征调整选择器
• MutationObserver的作用是监听元素类名变化，确保Elementor通过JS动态切换显示状态时，输入框的必填状态能同步更新
• 初始化时执行updateRequirements()，避免页面加载时状态不一致

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