WordPress设置页如何通过add_settings_field条件添加禁用表单字段

现有代码错误原因 #

你的代码不生效主要有3个问题：

• 事件绑定参数错误：document.addEventListener('click', UpdateFields(), false) 中UpdateFields加了括号，会立即执行函数并将返回值（undefined）绑定为事件回调，而非将函数本身绑定为回调。
• 事件类型与绑定对象不合理：给全局document绑定click事件过于宽泛，仅需要给触发状态变化的复选框绑定change事件即可。
• 缺少初始状态同步：页面加载完成后没有立即执行一次状态更新逻辑，初始加载时的字段状态不会自动同步。

正确JavaScript实现 #

用你已经引入的jQuery可以写出更简洁兼容的代码，示例如下：

jQuery(document).ready(function($){
    // 缓存DOM对象，避免重复查询
    const $trigger = $('#stwc_ft_oosn_0');
    const $target = $('#stwc_ft_oosn_notice_1');

    function updateFieldStatus() {
        // 直接用prop方法操作disabled属性，比setAttribute更稳定
        $target.prop('disabled', !$trigger.is(':checked'));
    }

    // 页面加载后同步一次初始状态
    updateFieldStatus();
    // 复选框状态变化时同步
    $trigger.on('change', updateFieldStatus);
});

你需要提前确认两个字段的ID和代码中完全一致，且脚本只在你的插件设置页加载，避免影响其他WordPress后台页面。

安全性说明 #

• 前端JavaScript的禁用仅属于交互层优化，完全不能作为安全限制：用户可以通过浏览器控制台删除disabled属性，或者直接构造POST请求提交被禁用字段的值。
• 你必须在后台设置保存的校验逻辑中增加对应判断，和前端规则保持一致，当触发禁用的条件满足时，直接忽略对应字段的提交值，保留原有存储值，才能保证数据安全。

后台校验示例代码（和你注册设置的代码放在一起即可）：

register_setting(
    'settings-admin', // 和你add_settings_field用的选项组名一致
    '你的设置项存储名称',
    function($input) {
        $saved = get_option('你的设置项存储名称', []);
        // 触发禁用的条件成立时，保留原有值，不接收提交的新值
        if (empty($input['stwc_ft_oosn_0'])) {
            $input['stwc_ft_oosn_notice_1'] = $saved['stwc_ft_oosn_notice_1'] ?? '';
        }
        return $input;
    }
);

内容的提问来源于stack exchange，提问作者Jason 'Slingshot' Miller