title: Knockout bootstrap ul set active li
body: <p>I want to set a list item's CSS to active when clicked. I have a working implementation, but I also need to remove the active class from any other <code>li</code> elements within the <code>ul</code> element.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;ul data-bind="foreach: cats" class="list-group"&gt;
       &lt;li class="list-group-item" data-bind="click: catSelected, css: { active: isCatChosen() == true}"&gt;
       &lt;span data-bind="text: catName"&gt;&lt;/span&gt;
       &lt;span class="badge" data-bind="text: catClicks"&gt;&lt;/span&gt;
       &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var CatsViewModel = function() {
              var catList = this;
  
              catList.cat = ko.observable();
  
              catList.cats = ko.observableArray([
                      {   'catName' : 'Twins',
                          'catClicks' : ko.observable(0),
                          'catImage' : 'img/funnyCat.jpg',
                          'isCatChosen': ko.observable(false),
                          'catSelected': function() {
                                              this.isCatChosen(true);
                                          } 
                      }, {
                          'catName' : 'Leopard',
                          'catClicks' : ko.observable(0),
                          'catImage' : 'img/leopard.jpg',
                          'isCatChosen': ko.observable(false),
                          'catSelected': function() {
                                              this.isCatChosen(true);
                                          } 
                      },{
                          'catName' : 'Blue Eyes',
                          'catClicks' : ko.observable(0),
                          'catImage' : 'img/blueEyes.jpg',
                          'isCatChosen': ko.observable(false),
                           'catSelected': function() {
                                              this.isCatChosen(true);
                                          } 
                       },{
                          'catName' : 'Mountain Lion',
                          'catClicks' : ko.observable(0),
                          'catImage' : 'img/mountainLion.jpg',
                          'isCatChosen': ko.observable(false),
                           'catSelected': function() {
                                              this.isCatChosen(true);
                                          } 
                       },{
                          'catName' : 'Painted Lion',
                          'catClicks' : ko.observable(0),
                          'catImage' : 'img/paintedlion.jpg',
                          'isCatChosen': ko.observable(false),
                           'catSelected': function() {
                                              this.isCatChosen(true);
                                          } 
                      }
               ]);
          };
  
          ko.applyBindings(new CatsViewModel());
  &lt;/script&gt;
  </code></pre>