jQuery icheck 插件答案

【问题标题】：Jquery icheck pluginjQuery icheck 插件
【发布时间】：2018-01-11 18:59:39
【问题描述】：

我想在 JqGrid 上应用 iCheck 样式，我在网上尝试了许多解决方案。我需要设置格式化程序或设置列类型复选框。我尝试设置格式化程序并插入复选框，我也尝试设置类型复选框并设置格式，但是如果我通过 jquery 选择复选框，样式就会消失

$.jgrid.defaults.responsive = true;
    $.jgrid.defaults.styleUI = 'Bootstrap';
    jQuery("#grdRoles").jqGrid({
        url: rolesUrl,
        datatype: "json",
        colModel: [
            { name: 'RoleId', index: 'Id', label: 'Id', search: false, hidden: true, key: true },
            {
                name: 'RoleStatus',
                label: 'RoleStatus',
                editable: true,
                edittype: 'checkbox',
                editoptions: { value: "True:False" },
                formatter: "checkbox",
                formatoptions: { disabled: false }


            },
            { name: 'RoleName', index: 'RoleName', label: 'RoleName', width: 80, search: false },
        ],

        onSelectRow: function (rowid, state) {


            var $RowIdValue = $("#jqg_" + $.jgrid.jqID(this.id + "_" + rowid)).next("a");
            var SelecterId = $RowIdValue.prevObject[0];
            var $a = $("div.icheckbox_flat-green")
            $.each($a, function (index) {
                var item = $a[index];
                $.each(item.children, function (index1) {

                    var childrenitem = item.children[index1];
                    if (childrenitem === SelecterId) {

                        if (state) {
                            item.className = "icheckbox_flat-green checked";
                        } else {
                            item.className = "icheckbox_flat-green";
                        }
                    }

                })

            });

        },
        loadComplete: function () {

            var $checkboxes = $("#grdRoles [name=RoleStatus]");
            //$checkboxes.prettyCheckable();
            $checkboxes.iCheck({
                checkboxClass: 'icheckbox_flat-green',
                radioClass: 'iradio_flat-green'
            });


            //var $checkboxes = $("#grdRoles input[type=checkbox]");
            //$checkboxes.iCheck({
            //    checkboxClass: 'icheckbox_flat-green',
            //    radioClass: 'iradio_flat-green'
            //});

            //$checkboxes.on('ifChanged', function (event) {
            //   console.log('check')
            //});


        }

    });

【问题讨论】：

使用的是哪个版本的jqGrid？ Guriddo jqGrid、free-jqGrid 或 jqGrid
脚本文件本身的 icheck 版本：* iCheck v1.0.2，git.io/arlzeA * 用于复选框和单选按钮自定义的强大 jQuery 和 Zepto 插件 * (c) 2013 Damir Sultanov，fronteed.com * MIT许可
JgGrid 的版本是 Guriddo_jqGrid_JS_5.2.1

标签： jqgrid icheck

【解决方案1】：

我把这个加载完成：函数（）{

            var $checkboxes = $("#gridId [type=checkbox]");

            $checkboxes.iCheck({
                checkboxClass: 'icheckbox_flat-green',
                radioClass: 'iradio_flat-green'
            });
        and it works fine and note it is better not to check , uncheck checkboxes using jquery i think this make some conflict.

【讨论】：