来自 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 找到了解决方案（见注释）：

Sometimes you shouldn't wrap the checkbox and .lbl inside a label. For example in jqGrid plugin, when you launch an "edit record" or "new record" dialog, and want to style the checkbox dynamically: form.find('input[type=checkbox]') .addClass('ace ace-switch ace-switch-5').after(''); Checkbox should not be wrapped inside label because it conflicts with plugin's data upload mechanism.

所以我删除了函数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');

}

来自 ace 的 jqgrid 中的函数 styleCheckbox() 不能完美运行

function styleCheckbox() in jqgrid from ace doesn't work perfectly

checkbox

styles

jqgrid