выберите/снимите определенные флажки в строке

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' ] 
     } 
    ] 
}); 

Надеюсь, это поможет. В этом примере используется локальный источник данных, но основной вопрос тот же, единственное предостережение заключается в том, что это использует режимы редактирования/не редактирование сеток, поэтому я не знаю, какая часть разблокирования сделки ...