Is there a way to disable checkbox in jqgrid?

Question

I'm trying to disable a checkbox input in jqgrid.

I used this custom formatter on the colModel array for the field

formatter: function (cellvalue, options, rowObject)
           {
                return '<input type="checkbox" value="' + cellvalue + '" ' + (rowObject.IsActive== true ? 'checked="checked"' : '') + ' ' + (rowObject.IsEnabled == false ? 'disabled="disable"' : '') + '/>';
           }

This work as I want some rows can be checked when is allowed, but the problem is when I checked any of those rows and I get the value like this:

$('#jqgTable').jqGrid('getCell', id, 'IsActive');

Is returnig the input html tag <input type="checkbox" value="true" checked="checked"> , but always is true using $($('#jqgTable').jqGrid('getCell', "idSelected", 'IsActive')).is(':checked') .

Before I used the formatter: "checkbox" and with $('#jqgTable').jqGrid('getCell', id, 'IsActive'); I get Yes or No so I can do what I need, but all checkbox are enable.

I tried too this other solution

I used with formatter: "checkbox" and the function

    beforeSelectRow: function (rowid, e) {
        var $target = $(e.target);
        if ($target.is(":checkbox")) {
            var canChange = $("#jqgTable").jqGrid('getRowData', rowid).IsEnabled == 'false' ? false : true;
            if ($("#jqgTable").jqGrid('getRowData', rowid).IsEnabled == 'false' ? false : true) {
                UpdateState(rowid);
            }
            else
            {
                e.preventDefault();
            }
        }
        return true;
    },

This works but the checkbox seems looks like I can change it.

All code using the first option

    $("#jqgTable").jqGrid({
        data: data,
        datatype: "local",
        colNames: [
            'Checkbox'
            ,'Enable'
        ],
        colModel: [    
            {
                name: 'IsActive', label: "Active", width: 100,
                //formatter: 'checkbox',
                align: "center", stype: "select",
                searchoptions: { sopt: ["eq", "ne"], value: "true:Si;false:No" },
                editable: true, edittype: 'checkbox', formatoptions: { disabled: false },
                formatter: function (cellvalue, options, rowObject)
                {
                    return '<input type="checkbox" value="' + cellvalue + '" ' + (rowObject.IsActive == true ? 'checked="checked"' : '') + ' ' + (rowObject.IsEnable == false ? 'disabled="disable"' : '') + '/>';
                }
            },
            { 
                name: 'IsEnable', label: '', width: 1, hidden: true 
            },
        ],
        rowNum: 10,
        mtype: 'GET',
        loadonce: true,
        rowList: [5, 10, 20, 30, 40, 50],
        pager: '#jqgTablePager',
        sortable: true,
        multiselect: false,
        pageable: true,
        viewrecords: true,
        sortorder: 'desc',
        gridview: true,
        autowidth: false,
        width: 100,
        shrinkToFit: false,
        altRows: true,       
        altclass: "myAltRowClass",       
        gridComplete: function (){
                //Second option
        },
        beforeSelectRow: function (rowid, e) {
            var $target = $(e.target);
            if ($target.is(":checkbox")) {
                var canChange = $("#jqgTable").jqGrid('getRowData', rowid).IsEnabled == 'false' ? false : true;
                if ($("#jqgTable").jqGrid('getRowData', rowid).IsEnabled == 'false' ? false : true) {
                    UpdateState(rowid);
                }
                else
                {
                    e.preventDefault();
                }
            }
            return true;
        }
    });
    $('#jqgTable').jqGrid('navGrid', '#jqgTablePager',
    {
       edit: false,
       add: false,
       del: false,
       search: true,
       searchtext: "Search"
    },
    //Edit
    {},
    //Add
    {},
    //Delete
    {},
    //Search
    {
       closeAfterSearch: true,
       closeAfterReset: true,
       closeOnEscape: false,
       searchOnEnter: true,
       multipleSearch: true,
       multipleGroup: false,
       showQuery: false
    }
    ).navButtonAdd('#jqgTablePager', { title: "Title", caption: "Caption", buttonicon: 'ui-icon-wrench', onClickButton: function () { ShowGroup(); }, position: "last" })
    .navButtonAdd('#jqgTablePager', { title: "Delete", caption: "", buttonicon: 'ui-icon-close', onClickButton: function () { CleanGroup(); }, position: "last" });
    $("#jqgTable").trigger("reloadGrid");

Thank You!

Update

I tried with the second option and I add in the gridComplete function this to apply a css style disabled with cursor: not-allowed :

var ids = $("#jqgTable").jqGrid('getDataIDs');
         
for (var i = 0; i < ids.length; i++) {
    var id = ids[i];
    var isEditable = $("#jqgTable").jqGrid('getRowData', id).IsEnabled == 'false' ? false : true;
    if (!isEditable)
        $("#jqgTable").jqGrid('setCell', id, 'IsActive', '', 'disabled', {disabled : true});
}

Works fine.

Update

At the end I did this:

I left the default formatter for checkbox in the ColModel And on the gridComplete function I add:

   var IsEnabled = $("#jqgTable").jqGrid('getRowData', id).IsEnabled == 'false' ? false : true;
   var IsActive = $("#jqgTable").jqGrid('getRowData', id).IsActive == 'false' ? false : true;
   if (!IsEnabled)
   {
       $("#jqgTable").jqGrid('setRowData', id, { IsActive: '<input type="checkbox" ' + (IsActive == true ? 'checked="checked"' : '') + ' disabled="disable/>'});
   }

Answer 1

In order to solve your problem you should define unformat function again with

custom formatter.  so if your custom formatter is :

formatter: function (cellvalue, options, rowObject)
           {
                return '<input type="checkbox" value="' + cellvalue + '" ' + (rowObject.IsActive== true ? 'checked="checked"' : '') + ' ' + (rowObject.IsEnabled == false ? 'disabled="disable"' : '') + '/>';
           }

Define in colModel the unformat like:

unformat : function(cellvalue, options, cell) {
    return $("input",cell).is(":checked")=== true;              
}

Note that we analyze the cell and not the cellvalue .

We tested this in Guriddo jqGrid and it is working as expected.

Now using getCell and getRowData will return true or false depending if the check box is checked