ノックアウトのチェックボックスリストのチェック属性

Question

チェックボックスのリストとして表示して表示する必要がある2つの配列があります。 主なアイデアは、最初のリストの要素をクリックして2番目のリストに要素を追加することです。 HTMLコードがこの

<div class="tab-pane" id="ColumnHeading"> 
      <div class="row"> 
       <div class="form-group span4"> 
        <h4>Column Headings</h4> 
        <ul class="icons-ul" data-bind="foreach: staticItem.ColumnHeadingList.ColumnHeadingListItem" > 
         <li> 
          <div class="span2"> 
           <input class="selectedHeading" type="checkbox" data-bind=" click: $parent.myCheck, checkedInArray: $parent.Params.Item.ColumnHeadingList.ColumnHeadingListItem, attr: { value: Value }" /> 
           <span data-bind="text: Name"></span> 
          </div> 
         </li> 
        </ul> 
       </div> 
       <div class="form-group span4" style="margin-left: -90px; margin-top: 15px"> 
        <div class="icons-ul" data-bind="foreach: Params.Item.ColumnHeadingList.ColumnHeadingListItem" > 
          <div class="span4"> 
           <input type="checkbox" data-bind="customcheck: IntOnly" /> 

          </div> 
        </div> 
       </div> 
       <div class="span6"> 
        <p class="validationMessage" data-bind="validationMessage: Params.Item.ColumnHeadingList.ColumnHeadingListItem"></p> 
       </div> 
      </div> 

値のように見える「IntOnlyは」チェックボックスの二つのリスト内の各オブジェクトのプロパティです。

チェックボックスの最初のリスト上のクリックイベントのための私の機能はcustomcheck機能チェックcuzをIntOnlyに値を第二のリストに要素を追加し、保存するためのコードが正常に動作して、この

self.myCheck = (function(e) { 
        var index = self.staticItem.ColumnHeadingList.ColumnHeadingListItem().map(function(e) { return e.Value(); }).indexOf(this.Value()); 

        if (self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly() !== "Y") { 
         self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly("Y"); 
         var o = self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index]; 
         var flag = false; 
         for (i = 0; i < self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length; i++) { 

          if (this.Value() == self.Params.Item.ColumnHeadingList.ColumnHeadingListItem()[i].Value()) { 
           flag = true; 
          } 
         } 
         if (flag == false || self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length == 0) { 
          var newObject = jQuery.extend(true, {}, this); 
          self.Params.Item.ColumnHeadingList.ColumnHeadingListItem.push(newObject); 

         } 
        } else { //checked==true 

         self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly("N"); 
         for (i = 0; i < self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length; i++) { 

          if (this.Value() == self.Params.Item.ColumnHeadingList.ColumnHeadingListItem()[i].Value()) { 
           self.Params.Item.ColumnHeadingList.ColumnHeadingListItem.splice(i, 1); 
          } 
         } 
        } 
        return true; 

       }); 

のように見えるものIntOnlyの値はチェックボックスを選択すると 'Y'になりますが、その値を取得していても最初のリストのプロパティを保存することができ、フォームがサーバーに送信されて編集用に表示された後にチェックボックスを選択します。

ご迷惑をおかけして申し訳ございませんが、ご迷惑をおかけして申し訳ございません。

Answer 1

私は別のものを構築するチェックボックスのリストの非常に簡単な例を作りました。あなたがここで欲しいと思う重要なことは、チェックされた変数へのsubscribeです。その値が変更されたとき（チェックされているかチェックされていないとき）に行動を取ることができます。

私の関数は、値がtrueかfalseかをチェックし、pushまたはremoveのリスト要素を2番目のリストとの間でチェックします。便利なことに、私は両方のリストに同じデータ項目を使うことができます。私はちょうど別のメンバー変数にチェックボックスをバインドするので、2番目のリストのチェックボックスは、最初のリストの対応するチェックボックスから独立しています。

let vm = { 
 
    list1: [1, 2, 3].map((n) => { 
 
    const result = { 
 
     label: `op${n}`, 
 
     intOnly: ko.observable(false), 
 
     anotherCheckValue: ko.observable(false) 
 
    }; 
 

 
    result.intOnly.subscribe((isChecked) => { 
 
     if (isChecked) { 
 
     vm.list2.push(result); 
 
     } else { 
 
     vm.list2.remove(result); 
 
     } 
 
    }); 
 

 
    return result; 
 
    }), 
 
    list2: ko.observableArray() 
 
}; 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div data-bind="foreach:list1"> 
 
    <label> 
 
    <input type="checkbox" data-bind="checked: intOnly" /> 
 
    <span data-bind="text: label"></span> 
 
    </label> 
 
</div> 
 
<div data-bind="foreach:list2"> 
 
    <label> 
 
    <input type="checkbox" data-bind="checked: anotherCheckValue" /> 
 
    <span data-bind="text: label"></span> 
 
    </label> 
 
</div>