如何在WordPress的do_settings_sections()输出上应用JS代码

我来帮你搞定这个问题！你遇到的核心点是：通过do_settings_sections()动态渲染的设置字段，需要确保JS代码在DOM完全加载后执行，同时遵循WordPress的规范来加载脚本，这样才能正确绑定到这些动态生成的元素上。下面是一步步的解决方案：

1. 规范加载你的JS文件（不要直接内嵌） #

WordPress后台有自己的脚本加载机制，直接把JS写在模板里容易出现加载时机不对或者冲突的问题。我们需要单独创建JS文件，然后用wp_enqueue_script来加载它。

步骤1：创建JS文件 #

在你的插件目录下新建一个js文件夹，然后创建mail-plugin-admin.js文件，专门存放后台的自定义JS逻辑。

步骤2：在插件主文件中注册并加载脚本 #

在你的插件主PHP文件中添加以下代码，确保脚本只在你的设置页面加载：

add_action('admin_enqueue_scripts', 'mail_plugin_enqueue_admin_scripts');
function mail_plugin_enqueue_admin_scripts($hook) {
    // 替换成你的设置页面的hook名称
    // 如果你用add_options_page创建的页面，hook格式是：settings_page_你的插件slug
    $target_page_hook = 'settings_page_mail-plugin';
    
    // 只在目标设置页面加载脚本
    if ($hook !== $target_page_hook) {
        return;
    }

    wp_enqueue_script(
        'mail-plugin-admin-js', // 唯一标识
        plugin_dir_url(__FILE__) . 'js/mail-plugin-admin.js', // JS文件路径
        array('jquery'), // 依赖jQuery（WordPress后台默认已加载）
        '1.0.0', // 版本号
        true // 放在body末尾，确保DOM先加载完成
    );
}

2. 修正JS逻辑并确保DOM就绪后执行 #

你的原始JS有两个小问题：一是没有等待DOM加载完成就执行，二是禁用/启用的逻辑搞反了（选中Default应该禁用输入框，选中Manual才启用）。下面是修正后的JS代码，放在刚才创建的mail-plugin-admin.js里：

// 等待DOM完全加载后执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有name为MailPlugin的单选按钮
    const radioButtons = document.querySelectorAll('input[type=radio][name=MailPlugin]');
    
    // 页面加载时先初始化输入框状态（和当前选中的单选按钮同步）
    const checkedRadio = Array.from(radioButtons).find(radio => radio.checked);
    toggleTextInputState(checkedRadio);
    
    // 给每个单选按钮绑定change事件
    radioButtons.forEach(radio => {
        radio.addEventListener('change', function(e) {
            toggleTextInputState(e.target);
        });
    });
    
    // 封装切换输入框状态的函数
    function toggleTextInputState(activeRadio) {
        const textInput = document.getElementById('TextInput');
        if (!textInput) return; // 防止找不到元素报错
        
        if (activeRadio.value === 'radio1') {
            // 选中Default服务器，禁用输入框
            textInput.setAttribute('disabled', 'disabled');
        } else {
            // 选中手动设置，启用输入框
            textInput.removeAttribute('disabled');
        }
    }
});

3. 确认单选按钮的name属性匹配 #

要确保你的PHP渲染的单选按钮name属性和JS里的选择器一致。比如在你注册设置字段时，label_for参数要设置为MailPlugin：

// 示例：注册Default服务器的单选按钮字段
add_settings_field(
    'mail_server_default',
    'Mail Server Option',
    array($this, 'wordpress_mail_server'),
    'mail_plugin', // 对应do_settings_sections的参数
    'mail_settings_section', // 所属section
    array('label_for' => 'MailPlugin') // 这里决定了input的name属性
);

// 注册Manual服务器的单选按钮字段
add_settings_field(
    'mail_server_manual',
    '',
    array($this, 'choose_mail_server'),
    'mail_plugin',
    'mail_settings_section',
    array('label_for' => 'MailPlugin')
);

额外提示 #

• 初始化状态很重要：页面刷新后，要根据用户之前保存的设置来同步输入框的状态，上面的JS已经包含了这部分逻辑。
• 避免硬编码ID：如果以后修改了输入框的ID，记得同步修改JS里的选择器，或者考虑用类名来选择元素，更灵活。

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