title: styled bootstrap radio buttons not clickable in browser
body: <p>I'm trying to make these radio buttons clickable in the browser. I found an example at this <a href="http://bootsnipp.com/snippets/featured/checkboxradio-css-only#comments" rel="nofollow">link here</a> but the same implementation isn't working in my browser, nor here in the snippet. The change color when moused over, and get darker again when depress, but they don't retain that information or display a check mark like they do in the example I found. </p>
  
  <p>What's missing here?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn span.glyphicon {         
    opacity: 0;       
  }
  .btn.active span.glyphicon {        
    opacity: 1;       
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
  
    &lt;div class="well well-sm text-center"&gt;
  
      &lt;h3&gt;Radio&lt;/h3&gt;
      
      &lt;div class="btn-group" data-toggle="buttons"&gt;
        
        &lt;label class="btn btn-success" for="option1" active"&gt;
          &lt;input type="radio" name="options" id="option1" autocomplete="off" chacked&gt;
          &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
        &lt;/label&gt;
  
        &lt;label class="btn btn-primary" for="option2"&gt;
          &lt;input type="radio" name="options" id="option2" autocomplete="off"&gt;
          &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
        &lt;/label&gt;
  
        &lt;label class="btn btn-info" for="option3"&gt;
          &lt;input type="radio" name="options" id="option3" autocomplete="off"&gt;
          &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
        &lt;/label&gt;
  
        &lt;label class="btn btn-default" for="option4"&gt;
          &lt;input type="radio" name="options" id="option4" autocomplete="off"&gt;
          &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
        &lt;/label&gt;
  
        &lt;label class="btn btn-warning" for="option5"&gt;
          &lt;input type="radio" name="options" id="option5" autocomplete="off"&gt;
          &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
        &lt;/label&gt;
  
        &lt;label class="btn btn-danger" for="option6"&gt;
          &lt;input type="radio" name="options" id="option6" autocomplete="off"&gt;
          &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
        &lt;/label&gt;
      
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>