Question

在代码片段中是网格的示例，我想在备注具有无效值时无法使用网格中的复选框。在下面的代码中将有3个样本记录。输出：第一个和第三个复选框设置为无法，第二个复选框启用以允许用户选择。

var userRecord=[{reason:"Invalid",UserName:"test"},
                 {reason:"",UserName:"test1"},
                 {reason:"Invalid2",UserName:"test2"}]

var grid=$("#grid").kendoGrid({
                columns: [
                { field: "", width: "40px", template: "<input name='Discontinued' class='checkbox' type='checkbox' />" },
                { field: "reason", title: "Remark" },
                { field: "UserName", title: "User Name" },


               ],
    dataSource: {
      data: userRecord
    },
      dataBound: function (e) {
        $(".checkbox").bind("change", function (e) {
          var grid = $("#grid").data("kendoGrid");
          var row = $(e.target).closest("tr");
          row.toggleClass("k-state-selected");
          var data = grid.dataItem(row);
        });
      }
});

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" />
  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" />
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
</body>
</html>

Answer 1

尝试这样的事情：#= (reason=='')? 'disabled=disabled' : ''#

我不确定你是否想要第一次和第三次禁用，或者你想让中间人禁用，但我认为你有这个想法。

var userRecord=[{reason:"Invalid",UserName:"test"},
                 {reason:"",UserName:"test1"},
                 {reason:"Invalid2",UserName:"test2"}]

var grid=$("#grid").kendoGrid({
                columns: [
                { field: "", width: "40px", template: "<input name='Discontinued' class='checkbox' #= (reason=='')? 'disabled=disabled' : ''# type='checkbox' />" },
                { field: "reason", title: "Remark" },
                { field: "UserName", title: "User Name" },


               ],
    dataSource: {
      data: userRecord
    },
      dataBound: function (e) {
        $(".checkbox").bind("change", function (e) {
          var grid = $("#grid").data("kendoGrid");
          var row = $(e.target).closest("tr");
          row.toggleClass("k-state-selected");
          var data = grid.dataItem(row);
        });
      }
});

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" />
  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" />
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
</body>
</html>

如何无法使用kendo grid复选框？

1 个答案: