javascript - Kendo Grid 复选框禁用编辑

Question

我正在寻找一个解决方案，如果在我的数据源中选中='yes'，如何禁用要检查的复选框。

Full Demo in Dojo

$("#grid").kendoGrid({
  columns: [
    { selectable: true, headerTemplate:'<b>Some title</b>' },
    { field: "name" }
  ],
  dataSource: [ { name: "Jane Doe", checked:"yes" }, 
               	{ name: "John Doe", checked:"no" }, 
               	{ name: "Doe John", checked:"yes" }, 
               	{ name: "John", checked:"no" } ],
  dataBound:function(e){
    var grid = this;
    var rows = grid.items();

    $(rows).each(function(e) {
      var row = this;
      var dataItem = grid.dataItem(row);
      if (dataItem.checked == 'yes' ){ 
        grid.select(row);	
        
        //grid.select('disable',true);
        //grid.addClass(".k-state-selected");	
      }
    });
  }
});

Answer 1

你就快到了。只需添加 class 即可禁用该行上的鼠标事件。

.disabled{
  opacity:0.5;
  pointer-events:none;
}
dataBound:function(e){
  var grid = this;
  var rows = grid.items();

  $(rows).each(function(e) {
    var row = this;
    var dataItem = grid.dataItem(row);
    if (dataItem.checked == 'yes' ){ 
      grid.select(row); 
      console.log(row);
      $(row).addClass("disabled");  
    }
  }

注意:这将禁用整行的任何事件，如果您愿意，您可以通过查找内部复选框元素仅禁用复选框:

$(row).find(".k-checkbox-label").addClass("disabled");

您修改后的示例:Disable checked