title: Knockout: click & checked bindings in one element
body: <p>I have array of limits, and checkboxes for enable/disable limits. But checkboxes do not work</p>
  
  <p><a href="http://jsfiddle.net/WtPM9/1/">jsFiddle</a></p>
  
  <pre><code>function Limit(start, end)
  {
      var that = this;
  
      this.start = start;
      this.end = end;
  
      this.label = ko.computed(function(){
          return that.start + ' - ' + that.end;            
      });
  }
  
  function ViewModel()
  {
      var that = this;
  
      this.limits = [new Limit(1,2), new Limit(3,4), new Limit(4,5)];
  
      this.activeLimit = ko.observable(that.limits[0]);
  
      this.changeActiveLimit = function(limit)
      {
              that.activeLimit(limit);
      }
  }
  
  ko.applyBindings(new ViewModel());​
  </code></pre>
  
  <p><strong>My HTML</strong></p>
  
  <pre><code>&lt;div data-bind="foreach: {data: limits, as: 'limit'}"&gt;
   &lt;input type="checkbox" data-bind="click: $root.changeActiveLimit, checked: limit.label == $root.activeLimit().label"/&gt;
      &lt;span data-bind="text: limit.label"/&gt; 
  
  &lt;/div&gt;
  </code></pre>