title: Setting bootstrap button to pressed state if checked property is set
body: <p>Clicking the text in <code>div</code> does not set bootstrap's state to <em>pressed</em>.</p>
  
  <p>To reproduce, run the code snippet below and click in <code>Set button to pressed state</code>. The button is still in unpressed state but the alert shows that the <em>checked</em> property is set.</p>
  
  <p>How to fix it, so the buttons appear in the <em>checked</em> state if clicked in the text inside the <code>div</code> ?</p>
  
  <p>The Bootstrap documentation contains:</p>
  
  <blockquote>
    <p>If the checked state of a checkbox button is updated without firing a click event on the button (e.g. via  or via setting the checked property of the input), you will need to toggle the .active class on the input's label yourself.</p>
  </blockquote>
  
  <p>Shoud this be implemented and if yes, how ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $(function () {
              $('.designer-field').on("click", function () {
                  $('#designer-javascript-bold').prop('checked', true);
                  // alert($('#designer-javascript-bold').prop('checked'));
              });
          });
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="btn-group" data-toggle="buttons"&gt;
          &lt;label class="btn btn-info"&gt;
              &lt;input type="checkbox" autocomplete="off" id="designer-javascript-bold"&gt;&lt;span class="glyphicon glyphicon-bold"&gt;&lt;/span&gt;
          &lt;/label&gt;
          &lt;label class="btn btn-info"&gt;
              &lt;input type="checkbox" autocomplete="off"&gt;&lt;span class="glyphicon glyphicon-bold"&gt;&lt;/span&gt;
          &lt;/label&gt;
  
      &lt;/div&gt;
      &lt;div class="designer-field"&gt;Set button to pressed state&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>