選擇/取消選擇行中的特定複選框

Question

此問題位於Kendo網格的上下文中，但我相信它同樣適用於傳統表格。

網格左下角有項目，項目經過的步驟有關的列。部分功能是，如果選中了複選框，則無論其初始狀態如何，該行中的所有前面的複選框都將被設置爲進行檢查。

這是（由於Kendo網格）假定在JQuery函數中處理，其中該函數檢查特定複選框是否被選中，然後將相同的選中狀態應用於特定行的所有複選框對應於在選中複選框之前發生的類。

我帶領相信（從我的JQuery目前有限的知識，以及切割/粘貼各種類似的代碼段）是調整前的複選框，需要像下面的代碼：

$("#Step2").change(function(){ 
    if ($('#Step2').is(':checked')) { 
     $(this).parents('tr').closest(".Step1:checkbox").prop("checked", true); 
    } 
    else 
    { 
     $(this).parents('tr').closest(".Step1:checkbox").prop("checked", false); 
    } 
}); 

然而，這不根據需要選擇上一步的複選框。

劍道格的列如下，如果它可以幫助：

columns: [ 
    { field: "Item" }, 
    { field: "Step1", title: "Step 1", attributes: {style: "text-align: center"}, template: '<input class="Step1" id="Step1" type="checkbox" #= Step1 ? "checked=checked" : "" # ></input>', headerTemplate: '<div style="text-align:center">Step 1<br/><input type="checkbox" id="step1Toggle"></input></div>' }, 
    { field: "Step2", title: "Step 2", attributes: {style: "text-align: center"}, template: '<input class="Step2" id="Step2" type="checkbox" #= Step2 ? "checked=checked" : "" # ></input>', headerTemplate: '<div style="text-align:center">Step 2<br/><input type="checkbox" id="step2Toggle"></input></div>' }, 
    { field: "Step3", title: "Step 3", attributes: {style: "text-align: center"}, template: '<input class="Step3" id="Step3" type="checkbox" #= Step3 ? "checked=checked" : "" # ></input>', headerTemplate: '<div style="text-align:center">Step 3<br/><input type="checkbox" id="step3Toggle"></input></div>' }, 
    { field: "Step4", title: "Step 4", attributes: {style: "text-align: center"}, template: '<input class="Step4" id="Step4" type="checkbox" #= Step4 ? "checked=checked" : "" # ></input>', headerTemplate: '<div style="text-align:center">Step 4<br/><input type="checkbox" id="step4Toggle"></input></div>' }, 
    { field: "Step5", title: "Step 5", attributes: {style: "text-align: center"}, template: '<input class="Step5" id="Step5" type="checkbox" #= Step5 ? "checked=checked" : "" # ></input>', headerTemplate: '<div style="text-align:center">Step 5<br/><input type="checkbox" id="step5Toggle"></input></div>' } 
] 

Answer 1

從您的文章，並基於我先前的評論，我認爲你正在尋找實現的功能可以在下面可以看到jFiddle：

http://jsfiddle.net/neilhibbert/kmc6z/10/

HTML：

<div id="wrapper"> 
    <div id="grid"></div> 
</div> 
<div style="clear:both"></div> 
<br/> 

Kendo UI/JS

var dataModel = [{ ColourId: 1, Colour: "Red", Step1: true, Step2: false, Step3: false, Step4: false, Step5: false},{ ColourId: 2, Colour: "Green", Step1: false, Step2: false, Step3: false, Step4: false, Step5: false},{ ColourId: 3, Colour: "Blue", Step1: false, Step2: false, Step3: false, Step4: false, Step5: false}]; 

$('#grid').kendoGrid({ 
    dataSource: { 
     transport:{ 
      read: function(o) { 
       o.success(dataModel); 
      }, 
      create: function(o) { 
       o.success(o.data); 
      }, 
      update: function(o) { 
       var dataItem = o.data, i, j; 
       for(i = 5; i>0; i-=1) { 
        if(dataItem['Step' + i] === true) { 
         for(j = i-1; j>0; j-=1) { 
          dataItem['Step' + j] = true; 
         } 
        } 
       } 
       o.success(dataItem); 
      }, 
      destroy: function(o){ 
       o.success(o.data); 
      } 
     }, 
     schema: { 
      data: function(response) { return response || []; }, 
      model: { 
       id: 'ColourId', 
       fields: { 
        ColourId: { type: 'number' }, 
        Colour: { type: 'string', editable: false }, 
        Step1: { type: 'boolean' }, 
        Step2: { type: 'boolean' }, 
        Step3: { type: 'boolean' }, 
        Step4: { type: 'boolean' }, 
        Step5: { type: 'boolean' }, 
       } 
      } 
     } 
    }, 
    editable: { 
     mode: 'inline' 
    }, 
    save: function(e) { 
     this.dataSource.sync(); 
    }, 
    columns: [ 
     { 
      title: 'Colour', 
      field: 'Colour' 
     }, 
     { 
      title: 'Step 1', 
      field: 'Step1', 
      template: '<input name="Step1" type="checkbox" disabled #=Step1 === true ? "checked" : ""# />' 
     }, 
     { 
      title: 'Step 2', 
      field: 'Step2', 
      template: '<input name="Step2" type="checkbox" disabled #=Step2 === true ? "checked" : ""# />' 
     }, 
     { 
      title: 'Step 3', 
      field: 'Step3', 
      template: '<input name="Step3" type="checkbox" disabled #=Step3 === true ? "checked" : ""# />' 
     }, 
     { 
      title: 'Step 4', 
      field: 'Step4', 
      template: '<input name="Step4" type="checkbox" disabled #=Step4 === true ? "checked" : ""# />' 
     }, 
     { 
      title: 'Step 5', 
      field: 'Step5', 
      template: '<input name="Step5" type="checkbox" disabled #=Step5 === true ? "checked" : ""# />' 
     }, 
     { 
      title: 'Actions', 
      command: [ 'edit' ] 
     } 
    ] 
}); 

我希望這會有所幫助。該示例使用本地數據源，但主體是相同的，唯一的警告是，這使得使用網格編輯/非編輯模式，所以我不知道有多少交易斷路器是...