jqGrid with an editable checkbox column

To allow the checkboxes to always be click-able, use the checkbox formatter's disabled property:

{ name: 'MyCol', index: 'MyCol',   editable:true, edittype:'checkbox', editoptions: { value:"True:False"},   formatter: "checkbox", formatoptions: {disabled : false} , ...

To answer your second question, you will have to setup an event handler for the checkboxes, such that when one is clicked a function is called to, for example, send an AJAX POST to the server. Here is some example code to get you started. You can add this to the loadComplete event:

    // Assuming check box is your only input field:    jQuery(".jqgrow td input").each(function(){        jQuery(this).click(function(){            // POST your data here...        });    });

This is an old one but has a lot of view so I decided to add my solution here too.

I'm making use of the .delegate function of JQuery to create a late binding implementation that will free you from the obligation of using the loadComplete event.

Just add the following:

$(document).delegate('#myGrid .jqgrow td input', 'click', function () { alert('aaa'); });

This will late bind that handler to every checkbox that's on the grid rows.You may have a problem here if you have more than one checkbox column.

I had the same problem and I suppose that I found a good solution to handle checkbox click immediately. The main idea is to trigger editCell method when user clicks on the non-editable checkbox. Here is the code:

        jQuery(".jqgrow td").find("input:checkbox").live('click', function(){            var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id'));            var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td'));            //I use edit-cell class to differ editable and non-editable checkbox            if(!$(this).parent('td').hasClass('edit-cell')){                                   //remove "checked" from non-editable checkbox                $(this).attr('checked',!($(this).attr('checked')));                        jQuery("#grid").editCell(iRow,iCol,true);            }    });

Except this, you should define events for your grid:

            afterEditCell: function(rowid, cellname, value, iRow, iCol){            //I use cellname, but possibly you need to apply it for each checkbox                       if(cellname == 'locked'){                //add "checked" to editable checkbox                    $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked')));                            //trigger request                    jQuery("#grid").saveCell(iRow,iCol);                }               },             afterSaveCell: function(rowid, cellname, value, iRow, iCol){                if(cellname == 'locked'){                    $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell');                }               }, 

Then your checkbox will send edit requests every time when user clicks on it.