时间戳

首页 > 解决方案 > 带有 JQuery 更改模板的 Kendo UI：只读或禁用

jquery - 带有 JQuery 更改模板的 Kendo UI：只读或禁用

问题描述

  <td role="gridcell">input</td>
  <td role="gridcell">1</td>
  <td role="gridcell">
    <input class="remove1" type="button" value="▼&quot; style="margin: 4px">
    <input id="Txt_test" class="txtBox" type="textbox" value="220" style="margin: 4px">
    <input class="Add1" type="button" value="▲&quot; style="margin: 4px">   
    </td>
  <td style="display:none" role="gridcell">
  </td>
    
  </tr>
  <tr class="k-alt" role="row">
    <td role="gridcell">input</td>
    <td role="gridcell">2</td><td role="gridcell">
    <input class="remove1" type="button" value="▼&quot; style="margin: 4px">
    <input id="Txt_test" class="txtBox" type="textbox" value="59" style="margin: 4px">
    <input class="Add1" type="button" value="▲&quot; style="margin: 4px">
      
    </td>
    </tr>
      
    </tbody>

顶部是我的输出 Html

然后我使用 JQuery 将下面的代码更改为禁用或只读，但它不起作用！

<input id="Txt_test" class="txtBox" type="textbox" value="220" style="margin: 4px">

我用 JQuery 尝试剑道 Ui

$("#Txt_test").attr('disabled', true);

和

$("#Txt_test").prop('readonly', true);

并改变班级

$(".txtBox").attr('disabled', true);

我改变了输入类型=“文本”对我来说同样的错误。我也试试

var clearAddGrid = $("#AddGrid").data('kendoGrid');
clearAddGrid.editable = false;

我想实现如下

if(status==0)
{
    Grid input can edit
}else{
    Grid input can't edit
}

这是我的网格单元

{ field: "txtRealNum", title: "RealNum", width: "40px", template: '<input class="remove1" type="button" value="▼&quot; style="margin: 1px" /><input  id="Txt_test" class="txtBox" type="textbox" value= #=txtRealNum# style="margin: 4px" /><input  class="Add1" type="button" value="▲&quot; style="margin: 1px" />' },

我的网格

    $("#AddGrid").kendoGrid({
        dataSource: AddGriddataSource,
        selectable: "row",
        scrollable: false,
        columns: AddGridCells,
        change: numberInput,
        pageable: {
            buttonCount: 3,
            messages: GridPageMsg
        },
        height: '100%',
        editable: true
    }).data("kendoGrid");

标签： jquerykendo-uikendo-grid

解决方案

所以你想禁用这个？

<input id="Txt_test" class="txtBox" type="textbox" value="220" style="margin: 4px">

由于您使用的是用于 jQuery 的 Kendo UI，因此您可以这样做：

$("#Txt_test").addClass("k-state-disabled");

那应该这样做。

感谢 Telerik DOJO 中的示例。如果要禁用所有input文本框。在您的 Kendo Grid 初始化之后添加下面的行。

$(".txtBox1").addClass("k-state-disabled");

为了您的方便：

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/from-table">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.2.511/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="AddGrid" style="height: 100%;" data-role="grid" class="k-grid k-widget">
      <table role="grid" data-role="selectable" class="k-selectable" style="height: auto;">          <colgroup>
        <col style="width:20px">
        <col style="width:20px">
        <col style="width:30px">
        <col style="width:30px">
        <col style="width:20px">
        </colgroup>
        <thead class="k-grid-header" role="rowgroup">
          <tr role="row">
            <th role="columnheader" data-field="txtRawNo" data-title="no" class="k-header">no</th><th role="columnheader" data-field="txtRawName" data-title="Name" class="k-header">name</th>
            <th role="columnheader" data-field="txtUnit" data-title="U" class="k-header">U</th>
            <th role="columnheader" data-field="txtBookNum" data-title="U" class="k-header">SNUM</th>
            <th role="columnheader" data-field="txtTranNum" data-title="NUM" class="k-header">NUM</th>
            <th role="columnheader" data-field="txtVersion" data-title="Version" style="display:none" class="k-header">Version</th>
          </tr>
        </thead>
        <tbody role="rowgroup"><tr data-uid="130d7d37-64f4-4f6e-98ca-fb2293e8d6ab" role="row">
          <td role="gridcell">11007109-2</td><td role="gridcell">SB 1kg*10</td>
          <td role="gridcell">1000g</td><td role="gridcell">818</td>
          <td role="gridcell"><input id="Del" class="Del1" type="button" value="▼" style="margin: 1px">
            <input id="Txt_test1" class="txtBox1" type="textbox" value="5" style="margin: 4px"><input id="plus" class="plus1" type="button" value="▲" style="margin: 1px">
          </td>
          <td style="display:none" role="gridcell">2021-06-02T15:08:00</td>
          </tr>
          <tr class="k-alt" data-uid="85651f08-df24-40b2-ae05-94123efb3125" role="row">
            <td role="gridcell">11094184</td><td role="gridcell">MS 1kg*10</td>
            <td role="gridcell">1000g</td>
            <td role="gridcell">801</td>
            <td role="gridcell">
              <input id="Del" class="Del1" type="button" value="▼" style="margin: 1px">
              <input id="Txt_test1" class="txtBox1" type="textbox" value="15" style="margin: 4px"><input id="plus" class="plus1" type="button" value="▲" style="margin: 1px"></td>
            <td style="display:none" role="gridcell">2021-06-03T11:24:00</td>
          </tr>
        </tbody>
      </table>
      <div class="k-pager-wrap k-grid-pager k-widget" data-role="pager">
        <a href="#" title="Go to the first page" class="k-link k-pager-nav k-pager-first k-state-disabled" data-page="1" tabindex="-1">
          <span class="k-icon k-i-seek-w">Go to the first page</span>
        </a><a href="#" title="Go to the previous page" class="k-link k-pager-nav k-state-disabled" data-page="1" tabindex="-1">
        <span class="k-icon k-i-arrow-w">Go to the previous page</span></a>
        <ul class="k-pager-numbers k-reset">
          <li><span class="k-state-selected">1</span></li></ul>
        <a href="#" title="Go to the next page" class="k-link k-pager-nav k-state-disabled" data-page="1" tabindex="-1">
          <span class="k-icon k-i-arrow-e">Go to the next page</span></a>
        <a href="#" title="Go to the last page" class="k-link k-pager-nav k-pager-last k-state-disabled" data-page="1" tabindex="-1">
          <span class="k-icon k-i-seek-e">Go to the last page</span></a>
        <span class="k-pager-info k-label">page1-2，total 2</span></div></div>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                selectable: "row",
                height: 550,
                sortable: true,
                editable: true
            });
          
            $(".txtBox1").addClass("k-state-disabled"); // comment/uncomment to see the outcome
        });    
     
    </script>
</div>

    

</body>
</html>

推荐阅读