来自 ace 的 jqgrid 中的函数 styleCheckbox() 不能完美工作

Question

我从ace演示中复制了jqgrid.html，并激活了功能styleCheckbox()来更改多选复选框的样式，但出了点问题。当我单击正方形时，复选框没有更改，而当我单击行的其他区域时，它正常工作。

函数 styelCheckbox（） 的定义：

function styleCheckbox(table) {
    $(table).find('input:checkbox').addClass('ace')
            .wrap('<label />')
            .after('<span class="lbl align-top" />')
            .removeClass('cbox');
    $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
            .find('input.cbox[type=checkbox]').addClass('ace')
            .wrap('<label />').after('<span class="lbl align-top" />')
            .removeClass('cbox');
}

在 jqgrid 完全加载后调用：

loadComplete : function() {
    var table = this;
    setTimeout(function(){
        styleCheckbox(table);
    }, 0);
},

Answer 1

我在Checkbox&Switch上找到了一个解决方案（见注释）：

有时，您不应该将复选框和 .lbl 包装在标签中。 例如，在 jqGrid 插件中，当您启动"编辑记录"或"新记录"对话框并希望动态设置复选框样式时： form.find（'input[type=checkbox]'） .addClass（'ace ace-switch ace-switch-5'）.after（''）; 复选框不应包装在标签内，因为它与插件的数据上传机制冲突。

所以我删除了函数styleCheckbox()中的.wrap(<label />)，然后它按照我想要的完美方式工作。

修改后的代码：

function styleCheckbox(table) {
$(table).find('input:checkbox').addClass('ace')
        .after('<span class="lbl align-top" />')
        .removeClass('cbox');
        $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
        .find('input.cbox[type=checkbox]').addClass('ace')
        .after('<span class="lbl align-top" />')
        .removeClass('cbox');

}