jQuery 根据列值禁用/启用剑道网格中的复选框

Disable/Enable the checkbox in kendo grid based on column Value

提问by Manjuboyz

I have a kendogrid all working good, now I got new requirement i.e. last column i have checkbox and just to that previous column I have a status column,

我有一个 kendogrid 一切正常，现在我有了新的要求，即最后一列我有复选框，只是到前一列我有一个状态列，

if that text value is "CERTIFIED" only then that specific row checkbox should be enabled, if the text is not 'CERTIFIED' it should disable the checkbox of that row,and should not allow to check that checkbox using jquery, I have attached pic of kendogrid I have, which might help for any suggestions

如果该文本值为“CERTIFIED”，则应启用该特定行复选框，如果文本不是“CERTIFIED”，则应禁用该行的复选框，并且不应允许使用 jquery 检查该复选框，我附上了图片kendogrid 我有，这可能有助于任何建议

CODE

代码

THESE ARE MY COLUMNS OF MY KENDO GRID

这些是我的剑道网格的列

, columns: [
            { field: "ResultFormatID", Title: "ResultFormatID", filterable: false, sortable: false, hidden: true },
            { field: "ID", Title: "ID", filterable: false, sortable: false, hidden: true },
            { field: "RowID", Title: "RowID", filterable: false, sortable: false, hidden: true },
            { field: "BillNumber", Title: "Bill Number", filterable: false, sortable: false, hidden: true },
            { field: "ServiceName", Title: "Service Name", width: 600 },
            { field: "Status", Title: "Service Status", width: 150 }
             , {
               template: $("#template").html(),
               headerTemplate: '<label>  <input type="checkbox" id="checkAll"/>Download</label>', filterable: false, sortable: false, width: 100,
           }
         ]

THIS IS MY INDIVIDUAL ROW CHECKBOX

这是我的个人行复选框

<script id="template" type="text/kendo-template">
   #if(ResultFormatID != 3) { #   
   <input type="checkbox" #= data.Action ? checked="checked" : "" #  class=\"check_row\"/>
   # } else { #
<input type="button" class="k-button info" name="info" value="Preview" />
   # } #

UPDATED

更新

THIS IS MY CHECKALL FUNCTION(and what i did to uncheck)

这是我的 CHECKALL 功能（以及我取消选中的操作）

 $("#checkAll").on('click', function (e) {
         debugger;

        var $cb = $(this);
        var checked = $cb.is(':checked');
        var grid = $('.Grid_table').data('kendoGrid');

        grid.table.find("tr").find("td:last input").attr("checked", checked);           


        var items = $(".Grid_table").data("kendoGrid").dataSource.data();
        for (i = 0; i < items.length; i++) {
            var item = items[i];
       var status = item.ServiceStatus;

            if (status == "Result Certified ") {
              grid.table.find("tr").find("td:last input").attr("checked", checked);
            }
            else {

                grid.table.find("tr").find("td:last input").prop("checked",false);
            }
     if (!checked) {
            // debugger;
            $(".Grid_table").data("kendoGrid").clearSelection();
        }

    });

});

UPDATE 2

更新 2

now as per your code, everything works fine and I am able to uncheck the not certified row, i am facing a problem with below code, if atleast single checkbox is not checked it disabled the button which is used to download the PDF file, now if i select all checkbox and clicked on that button download, it is disabled now!! but if i uncheck any one row out of like 10 rows, then download enables and used to download the file.

现在根据您的代码，一切正常，我可以取消选中未认证的行，我面临以下代码的问题，如果未选中至少一个复选框，它将禁用用于下载 PDF 文件的按钮，现在如果我选择所有复选框并单击该按钮下载，它现在被禁用！但如果我取消选中 10 行中的任何一行，则下载启用并用于下载文件。

if I disable the last 3 lines of below code, it helps in enabling the button to click, but i need to unselect atleast single check box to work, if not it will disabled, what am i doing wrong ??

如果我禁用下面代码的最后 3 行，它有助于启用按钮单击，但我需要取消选择至少一个复选框才能工作，否则它将被禁用，我做错了什么？

 $(function () {
         //debugger;            
        var checkboxes = $(':checkbox:not(#checkAll)').click(function (event) {
            $('#btn_Print').prop("disabled", checkboxes.filter(':checked').length == 0);
        });
        $('#checkAll').click(function (event) {
            checkboxes.prop('checked', this.checked);
            $('#btn_Print').prop("disabled", !this.checked)
        });
    });

IF

如果

回答by OnaBai

Seems that what you need is controlling if the inputfield of type="checkbox"is disabled. So you should defined the template as follow:

似乎您需要的是控制input字段是否type="checkbox"为disabled. 所以你应该定义模板如下：

<script id="template" type="text/kendo-template">
   #if(ResultFormatID != 3) { #   
   <input type="checkbox" #= data.Action ? checked="checked" : "" #  class=\"check_row\" #= data.Status == 'Certified' ? disabled='disabled' : "" #/>
   # } else { #
<input type="button" class="k-button info" name="info" value="Preview" />
   # } #
</script>

I.e: add the condition of data.Status == 'Certified' ? disabled='disabled' : ""

即：添加条件 data.Status == 'Certified' ? disabled='disabled' : ""

See it in action here: http://jsfiddle.net/Hfk3Q/

在这里查看它的实际效果：http: //jsfiddle.net/Hfk3Q/

EDIT: Changes required when clicking on headers check box would be changing its implementation for checking only those cells that are not disabled. Something like:

编辑：单击标题复选框时所需的更改将更改其实现以仅检查未禁用的单元格。就像是：

$('.check_row:not(:disabled)', grid.tbody).prop('checked', true);

See it in action here: http://jsfiddle.net/Hfk3Q/3/

在这里查看它的实际效果：http: //jsfiddle.net/Hfk3Q/3/