Knockout checkbox selection filter <p>I am new at knockoutjc library, and can you help me? I have created a new model in javascript like this.</p> <p><img src="https://i.stack.imgur.com/9fPUk.png" alt="enter image description here"></p> <p>The code is here:</p> <pre><code> &lt;h2&gt;Category : Throusers&lt;/h2&gt; &lt;h3&gt;Sizes&lt;/h3&gt; &lt;ul data-bind="foreach: products"&gt; &lt;li&gt; &lt;input type="checkbox" data-bind="value: size.id" /&gt; &lt;label data-bind="text: size.name"&gt;&lt;/label&gt; &lt;/li&gt; &lt;/ul&gt; &lt;h3&gt;Colors&lt;/h3&gt; &lt;ul data-bind="foreach: products"&gt; &lt;li&gt; &lt;input type="checkbox" data-bind="value: color.id" /&gt; &lt;label data-bind=" text: color.name"&gt;&lt;/label&gt; &lt;/li&gt; &lt;/ul&gt; &lt;h3&gt;Products&lt;/h3&gt; &lt;ul data-bind="foreach: products"&gt; &lt;li&gt; &lt;label data-bind="text: name"&gt;&lt;/label&gt; - &lt;label data-bind="text: size.name"&gt;&lt;/label&gt;- &lt;label data-bind="text: color.name"&gt;&lt;/label&gt; &lt;/li&gt; &lt;/ul&gt; &lt;script type="text/javascript"&gt; function Color(id, name) { return { id: ko.observable(id), name: ko.observable(name) }; }; function Size(id, name) { return { id: ko.observable(id), name: ko.observable(name) }; } function Product(id,name, size, color) { return { id: ko.observable(), name: ko.observable(name), size: size, color: color }; }; var CategoryViewModel = { id: ko.observable(1), name: ko.observable("Throusers"), products: ko.observableArray([ new Product(1,"Levi's 501", new Size(1, "30-32"), new Color(1, "Red")), new Product(2,"Colins 308", new Size(2, "32-34"), new Color(2, "Black")), new Product(3,"Levi's 507", new Size(1, "30-32"), new Color(3, "Blue")) ]) }; ko.applyBindings(CategoryViewModel); &lt;/script&gt; </code></pre> <p>And now,</p> <ol> <li>I wanna this: duplicated Sizes and colors should not list.</li> <li>When I select a color from colors, selected color products should list and others should be disabled</li> </ol> <p>If model is wrong?</p>