WordPress Elementor Form：如何添加选中后自动启用文本框的单选选项

以下两种方案均适用于Elementor Pro版本的表单组件：

方法1：使用表单自带条件逻辑（无需写代码，优先推荐） #

Elementor Pro表单原生支持字段条件显示功能，无需额外开发即可实现需求：

• 打开Elementor编辑器，拖入「表单」小部件到目标页面位置
• 在表单的「字段」配置区添加单选按钮字段：字段类型选择「单选（Radio）」，录入你需要的所有选项，包含要触发文本框显示的选项（例如「其他」），记下该单选字段的ID（可在字段的「高级」选项卡中自定义修改，比如设为choice_radio）
• 新增单行文本字段：字段类型选择「文本（Text）」，设置你需要的占位符、必填等属性
• 选中文本字段，切换到「高级」选项卡，找到「条件逻辑」设置项并开启
• 配置规则为：显示 当 [你刚才设置的单选字段ID] 的值 等于 [触发文本框显示的单选选项值]
• 保存页面即可生效，选中对应单选选项时文本框自动显示，未选中时自动隐藏，隐藏状态下的文本框内容不会被表单提交

提示：条件逻辑中填写的单选选项值需要和你单选字段里设置的选项值完全一致，避免空格、大小写差异导致匹配失败。

方法2：自定义JS实现（适合需要额外自定义控制的场景） #

如果你需要对文本框的状态做更多控制（比如自定义显示动画、额外的校验规则等），可以用自定义代码实现：

• 先按方法1的前两步添加好单选字段和文本字段，分别记下两个字段的ID，比如单选ID为choice_radio，文本字段ID为custom_text
• 点击Elementor编辑器左下角的页面设置图标，切换到「高级」选项卡，找到「自定义代码」区块，将以下代码粘贴到</body>之前的输入框中：

document.addEventListener('DOMContentLoaded', function() {
    // 请替换下方三个参数为你自己的配置
    const radioFieldName = 'form_fields[choice_radio]'; // 替换为你的单选字段ID
    const textFieldName = 'form_fields[custom_text]'; // 替换为你的文本字段ID
    const triggerOptionValue = '其他'; // 替换为触发显示的单选选项值

    const textFieldWrap = document.querySelector(`input[name="${textFieldName}"]`).closest('.elementor-field-group');
    const textField = textFieldWrap.querySelector('input');

    // 初始状态隐藏并禁用文本框
    textFieldWrap.style.display = 'none';
    textField.disabled = true;

    // 监听单选按钮变化
    document.querySelectorAll(`input[name="${radioFieldName}"]`).forEach(radio => {
        radio.addEventListener('change', function() {
            if(this.value === triggerOptionValue) {
                textFieldWrap.style.display = 'block';
                textField.disabled = false;
            } else {
                textFieldWrap.style.display = 'none';
                textField.disabled = true;
                textField.value = ''; // 清空已输入的内容
            }
        })
    })
})

• 替换代码中的三个配置参数为你自己的字段信息，保存页面后清空站点缓存即可生效。

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