title: Knockout JS Add/Remove class
body: <p>I am using Knockout to generate a dynamic form:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function FormField(data) {
    var self = this;
    self.Name = ko.observable(data.Name);
    self.Type = ko.observable(data.Type);
    self.Options = ko.observableArray(data.Type !== 'text' ? data.Options : []);
    self.Default = ko.observable(data.Default);
    if (self.Type() === 'Yes/No') {
      this.Default.subscribe(function(newValue) {
        console.log(newValue);
      });
    }
  }
  
  function ViewModel(data) {
    var self = this;
    self.Fields = ko.observableArray(ko.utils.arrayMap(data, function(item) {
      return new FormField(item);
    }));
    self.HiddenElements = ko.observableArray([]);
    self.Default = ko.observable();
  }
  
  ko.applyBindings(new ViewModel([{ 
    Name: "Test",
    Type: "Yes/No",
    Options: [{ name: "Yes" }, {name: "No" }],
    Default: ""
  }]));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=radio] {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"&gt;&lt;/script&gt;
  
  &lt;div data-bind="foreach: Fields"&gt;
      &lt;!--ko if: $parent.HiddenElements().indexOf(Name()) == -1 --&gt;
      &lt;div&gt;&lt;b type="text" data-bind="text: Name"&gt;&lt;/b&gt;:&lt;/div&gt;
      &lt;!--ko if: Type() == "Yes/No"--&gt;
      &lt;div data-bind="foreach: Options"&gt;
      &lt;label data-bind="css:$data.name == 'Yes' ? 'btn btn-success fa fa-circle-o' : 'btn btn-danger fa fa-circle-o'"&gt;
      &lt;input type="radio" value="cherry" data-bind="value: $data.name ,checked: $parent.Default" /&gt;
     &lt;span data-bind="text: $data.name"&gt;&lt;/span&gt;&lt;/label&gt;
      &lt;/div&gt;
     &lt;!--/ko--&gt;
     &lt;!--/ko--&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The output:<br />
  <a href="https://i.stack.imgur.com/e7pZj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e7pZj.png" alt="wrong output without selected button" /></a></p>
  <p>I am trying to remove the class fa-circle-o and add class fa-check-circle-o when any of the buttons is checked.</p>
  <p>Expected output:<br />
  <a href="https://i.stack.imgur.com/w8QsB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w8QsB.png" alt="output with 'Yes' selected" /></a></p>