How ot uncheck Bootstrap check box
<p>I am trying to check and uncheck the bootstrap checkbox. I am using a var test. which value I am getting from DB.
If the value is zero(0) I want to uncheck the checkbox, and if the value is one(1) I want to check the checkbox. it looks pretty simple.</p>

<p><strong>Jquery</strong></p>

<pre><code>if (test == 0) {
  $('#myCheck').prop('checked', false);
  alert("I am false");
} else {
  $('#myCheck').prop('checked', true);
  alert("I am True");
}
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="col-sm-2"&gt;
    &lt;label class="control-label" for="pwd"&gt;My checkbox:&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-1"&gt;
    &lt;span class="button-checkbox"&gt;
        &lt;input type="checkbox" class="hidden" checked id="myCheck" /&gt;
        &lt;button type="button" class="btn-chk" data-color="success" &gt;&lt;/button&gt;
    &lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>When the <code>test</code> is zero(0), it comes into the <code>if block</code> and I get the alert message <code>I am false</code> and when it's true I come into <code>else block</code> I get the message  <code>I am true</code> but, Checkbox is always checked. Where I am making mistake?. I would appreciate any help.</p>

<p>Update 1:</p>

<p>Bellow is the code what I am using for customising the checkbox button</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
    $('.button-checkbox').each(function () {

        // Settings
        var $widget = $(this),
            $button = $widget.find('button'),
            $checkbox = $widget.find('input:checkbox'),
            color = $button.data('color'),
            settings = {
                on: {
                    icon: 'glyphicon glyphicon-check'
                },
                off: {
                    icon: 'glyphicon glyphicon-unchecked'
                }
            };

        // Event Handlers
        $button.on('click', function () {
            $checkbox.prop('checked', !$checkbox.is(':checked'));
            $checkbox.triggerHandler('change');
            updateDisplay();
        });
        $checkbox.on('change', function () {
            updateDisplay();
        });

        // Actions
        function updateDisplay() {
            var isChecked = $checkbox.is(':checked');

            // Set the button's state
            $button.data('state', (isChecked) ? "on" : "off");

            // Set the button's icon
            $button.find('.state-icon')
                .removeClass()
                .addClass('state-icon ' + settings[$button.data('state')].icon);

            // Update the button's color
            if (isChecked) {
                $button
                    .removeClass('btn-default-chk')
                    .addClass('btn-' + color + ' active');
            }
            else {
                $button
                    .removeClass('btn-' + color + ' active')
                    .addClass('btn-default-chk');
            }
        }

        // Initialization
        function init() {

            updateDisplay();

            // Inject the icon if applicable
            if ($button.find('.state-icon').length == 0) {
                $button.prepend('&lt;i class="state-icon ' + settings[$button.data('state')].icon + '"&gt;&lt;/i&gt; ');
            }
        }
        init();
    });
});</code></pre>
</div>
</div>

is above code is causing the issue. could anyone please let me know</p>