title: bootstrap js radio buttons not working but normal onces are
body: <p>I have normal radio buttons that I am using to change looks around the page. And it works perfectly fine. I am using knockout js binding to give it functionality.
  Here is the HTML and the JS part all together. </p>
  
  <pre><code>&lt;h4 class="radio-inline" data-bind="visible: loggedIn() == 'true'"&gt;&lt;input type="radio" value="Borrow" data-bind="checked: radioSelectedOptionValue"&gt;Money1&lt;/h4&gt;
  &lt;h4 class="radio-inline" data-bind="visible: loggedIn() == 'true'"&gt;&lt;input type="radio" value="Invest" data-bind="checked: radioSelectedOptionValue"&gt;Money2&lt;/h4&gt;  
  </code></pre>
  
  <p>Here is the JS file for the checkedbinding.</p>
  
  <pre><code>self.radioSelectedOptionValue = ko.observable(radioSelectedOptionValue);
  </code></pre>
  
  <p>All the codes Above work perfectly like it should but now I wanted to make the normal looking radio buttons into proper buttons by using bootstrap js buttons but now the radio buttons do not function anymore.</p>
  
  <pre><code>&lt;div class="btn-group" data-toggle="buttons"&gt;
              &lt;label class="btn btn-primary" data-bind="visible: loggedIn() == 'true'"&gt;
                &lt;input type="radio" value="Borrow" data-bind="checked: radioSelectedOptionValue" &gt;Money1
              &lt;/label&gt;
              &lt;label class="btn btn-primary" data-bind="visible: loggedIn() == 'true'"&gt;
                &lt;input type="radio" value="Invest" data-bind="checked: radioSelectedOptionValue" &gt; Money2
              &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>