title: Disable bootstrap switch html element without toggling status
body: <p>I have a toggle defined as follows.</p>
  
  <pre><code>&lt;input type="checkbox"
    id="statusToggler"
    class="form-control switch conf-switch-state"
    data-label-text="Status"
    checked="true" 
    data-inverse="true"
    data-size="small" 
    data-off-color="warning"
    data-on-text="Active" 
    data-off-text="Disabled"&gt;
  </code></pre>
  
  <p>I am using boostrap switch to show a popup on toggling it. And I want to disable the <strong>input element</strong>, before showing a confirmation popup to change the status. I have tried everything, but the status of the toggle also gets changed when trying to disable the element. Here is my code.</p>
  
  <pre><code>$("input.conf-switch-state").bootstrapSwitch();
  
  
  $('input.conf-switch-state').on('switchChange.bootstrapSwitch', function (e, data) {
      $(this).bootstrapSwitch("disabled",true);
      $(this).bootstrapSwitch('state', !data, true);
  
      ...
      ..
  });
  </code></pre>
  
  <p>Here is the solution that I had referred. <a href="https://stackoverflow.com/a/39182836/6554834">https://stackoverflow.com/a/39182836/6554834</a></p>
  
  <p>Given below is the final html getting rendered after using bootstrap switch.</p>
  
  <pre><code>&lt;div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-small bootstrap-switch-inverse bootstrap-switch-id-hellohello bootstrap-switch-animate" style="width: 116px;"&gt;
  &lt;div class="bootstrap-switch-container" style="width: 170px; margin-left: -56px;"&gt;
      &lt;span class="bootstrap-switch-handle-off bootstrap-switch-warning" style="width: 56px;"&gt;Disabled&lt;/span&gt;
      &lt;span class="bootstrap-switch-label" style="width: 58px;"&gt;Status&lt;/span&gt;
      &lt;span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 56px;"&gt;Active&lt;/span&gt;
      &lt;input type="checkbox" name="confStatus" id="statusToggler" class="form-control switch conf-switch-state" data-label-text="Status" checked="true" data-inverse="true" data-size="small" data-off-color="warning" data-on-text="Active" data-off-text="Disabled"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>