title: Code to set/unset checkbox buttons in Bootstrap 3.0
body: <p>I've been trying to use a button group (as per the instructions at  at <a href="http://getbootstrap.com/javascript/#buttons">http://getbootstrap.com/javascript/#buttons</a>) and then to parse their values into a shifted array: </p>
  
  <p><strong>Code for the btn-group</strong></p>
  
  <pre><code>&lt;div class="btn-group" id="weekdays" data-toggle="buttons"&gt;
      &lt;label class="btn btn-default"&gt;
        &lt;input type="checkbox" &gt;Mo
      &lt;/label&gt;
      &lt;label class="btn btn-default"&gt;
        &lt;input type="checkbox"&gt;Tu
      &lt;/label&gt;
      &lt;label class="btn btn-default"&gt;
        &lt;input type="checkbox"&gt;We
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Code for reading the values</strong></p>
  
  <pre><code>$("#weekdays ").change(function(event){
  
     var checkedDays = $("#weekdays :checkbox").map(function(){
          return $(this).is(':checked') ? 1 : 0;
      }).get(); // &lt;----
  
      var sun = checkedDays.pop();
  
      checkedDays.unshift(sun);
  
      console.log(checkedDays);
  });
  </code></pre>
  
  <p>So far so good. (Even if I'm sure the code could be better written.)</p>
  
  <p>However, my problem comes when I try to <strong>set</strong> the values of the checkboxes programatically, and get it reflected in the UI. I've sort of managed to change the values of the checkboxes using a number of methods <code>$(this).prop('checked', true)</code>, etc, which seems to update the backing values, but it does nothing to change the appearance of the buttons. </p>
  
  <p>I've seen a number of solutions, but none that works with the Bootstrap 3.0 recommended way of setting up the checkbox <code>btn-group</code>. Does anyone have a solution?</p>