Symfony+EasyAdmin中Toggle复选框模拟单选功能的实现求助

问题分析 #

原代码无法生效的核心原因有三个：

• 选择器语法错误：多个类选择器之间的空格表示“后代元素”，而你的按钮容器的.toggle、.btn、.btn-xs、.btn-success是同一元素的多个类，应该用无空格的连写方式（如.toggle.btn.btn-xs.btn-success），而非带空格的层级选择。
• 未同步复选框状态：只修改了按钮样式，没有修改复选框本身的checked属性，导致实际表单状态和视觉表现不一致。
• 事件绑定方式局限：如果表单是EasyAdmin动态生成的，直接绑定change事件可能无法捕获到元素，需要用事件委托。

修正后的代码 #

// 使用事件委托确保动态生成的元素也能触发事件
$('#main').on('change', 'table .toggle input[type="checkbox"]', function() {
    // 获取当前复选框对应的外层按钮容器
    const $currentBtn = $(this).closest('.toggle.btn.btn-xs');
    
    if ($(this).is(':checked')) {
        // 设置当前按钮为选中状态
        $currentBtn.removeClass('btn-danger off').addClass('btn-success on');
        
        // 遍历同组其他复选框，取消选中并同步样式
        $('#main').find('table .toggle input[type="checkbox"]').not(this).each(function() {
            $(this).prop('checked', false);
            $(this).closest('.toggle.btn.btn-xs')
                .removeClass('btn-success on')
                .addClass('btn-danger off');
        });
    } else {
        // 取消当前复选框时同步样式
        $currentBtn.removeClass('btn-success on').addClass('btn-danger off');
    }
});

关键改进说明 #

• 事件委托：用$('#main').on('change', 'table .toggle input[type="checkbox"]', ...)绑定事件，确保EasyAdmin动态生成的复选框也能触发逻辑。
• 正确定位元素：通过closest('.toggle.btn.btn-xs')精准找到当前复选框对应的外层按钮容器，避免选择器错误。
• 同步状态与样式：同时修改复选框的checked属性和按钮的样式类，保证视觉和实际表单数据一致。

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