JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="list"></table>
<div id="pager"></div>
JavaScript
var myData = [{
id: 1,
name: "aaa",
checkbox: "Yes"
}, {
id: 2,
name: "bbb",
checkbox: "No"
}, {
id: 3,
name: "ccc",
checkbox: "No"
}, ],
getColumnIndexByName = function (mygrid, columnName) {
var cm = mygrid.jqGrid('getGridParam', 'colModel');
for (var i = 0, l = cm.length; i < l; i++) {
if (cm[i].name === columnName) {
return i;
}
}
return -1;
};
$("#list").jqGrid({
datatype: "local",
colNames: ["Id", "Name", "Checkbox"],
colModel: [{
name: "id",
index: "id",
sorttype: "int"
}, {
name: "name",
index: "name"
}, {
name: "checkbox",
index: "checkbox",
formatter: "checkbox",
formatoptions: {
disabled: true
},
editoptions: {
value: 'Yes:No',
defaultValue: 'Yes'
}
}],
caption: "Jqgrid Checkbox Disable/Enable",
pager: '#pager',
search: true,
data: myData,
loadComplete: function () {
var iColName = getColumnIndexByName($(this), 'name'),
iColCheckbox = getColumnIndexByName($(this), 'checkbox'),
cRows = this.rows.length,
iRow, row, className;
for (iRow = 0; iRow < cRows; iRow++) {
row = this.rows[iRow];
className = row.className;
if ($.inArray('jqgrow', className.split(' ')) > 0) {
var name = $(this).jqGrid('getCell', row.id, iColName);
if (name == 'aaa') {
$(row.cells[iColCheckbox]).children("input").prop("disabled", true);
} else {
$(row.cells[iColCheckbox]).children("input").prop("disabled", false);
}
}
}
}
});