ノックアウトjsでクリック可能なチェックボックスのラベルを作成するにはどうすればよいですか？

Question

テキストをクリック可能にするにはどうすればよいですか？以下は、ノックアウトテンプレートと呼ばれるリストです。私は直接ボックスをチェックすることができますが、チェックボックスを反映できるようにテキストをクリック可能にすることはできません。
HTML：

<ul data-bind="template: { name: 'choiceTmpl', foreach: choices, templateOptions: { selections: selectedChoices } }"></ul> 

    <script id="choiceTmpl" type="text/html"> 
     <li> 
      <input type="checkbox" data-bind="attr: { value: $data }, checked: $item.selections" /> 
      <label data-bind="text: $data"></label> 
     </li> 
    </script> 

JS：

var viewModel = { 
    choices: ["one", "two", "three", "four", "five"], 
    selectedChoices: ko.observableArray(["two", "four"]) 
}; 

viewModel.selectedChoicesDelimited = ko.dependentObservable(function() { 
    return this.selectedChoices().join(","); 
}, viewModel); 

ko.applyBindings(viewModel); 

Jsfiddleデモ：here

どのような方法は、我々はそれがクリック可能にすることができること、ありますか？

Answer 1

<input>要素の周囲<label>を置く：あなたのフィドルで

var viewModel = { 
 
    choices: ["one", "two", "three", "four", "five"], 
 
    selectedChoices: ko.observableArray(["two", "four"]) 
 
}; 
 

 
viewModel.selectedChoicesDelimited = ko.dependentObservable(function() { 
 
    return this.selectedChoices().join(","); 
 
}, viewModel); 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<ul data-bind="foreach: choices"> 
 
    <li> 
 
    <label> 
 
     <input data-bind="attr: { 
 
          value: $data 
 
         }, 
 
         checked: $parent.selectedChoices" type="checkbox" /> 
 
     
 
     <span data-bind="text: $data"></span> 
 
    </label> 
 
    </li> 
 
</ul> 
 

 
<pre data-bind="html: JSON.stringify(selectedChoices(), null, 2)"></pre>

：またhttp://jsfiddle.net/x0f1pk6q/

、あなたはループでid属性を構築することができます。 には、が一意であることが絶対に確認されていなければなりません。私は、セッションごとに一意であることが保証されているクロージャのインデックスをインクリメントするユーティリティを使用するようアドバイスします。あなたが同じ方法を使用してidとfor属性リンクする必要があり

：

var viewModel = { 
 
    choices: ["one", "two", "three", "four", "five"], 
 
    selectedChoices: ko.observableArray(["two", "four"]), 
 
    getCbId: function(val, i) { 
 
    // This combination of value and index aims to create a 
 
    // "kind-of-unique" id. See answer for more info. 
 
    return "CB_" + val + "_" + i; 
 
    } 
 
}; 
 

 
viewModel.selectedChoicesDelimited = ko.dependentObservable(function() { 
 
    return this.selectedChoices().join(","); 
 
}, viewModel); 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<ul data-bind="foreach: choices"> 
 
    <li> 
 
    
 
    <input data-bind="attr: { 
 
         value: $data, 
 
         id: $root.getCbId($data, $index()) 
 
         }, 
 
         checked: $root.selectedChoices" type="checkbox" /> 
 
    
 
    <label data-bind="text: $data, 
 
         attr: { 
 
         for: $root.getCbId($data, $index()) 
 
         }"></label> 
 
    
 
    </li> 
 
</ul> 
 

 
<pre data-bind="html: JSON.stringify(selectedChoices(), null, 2)"></pre>