How to make Bootstrap toggle button start on after page loads and not call callback if on
<p>I've been working on an ecommerce with Laravel 5. In each product's detail page, I want the visitor to click on a toggle button to add that item to the cart and click again to remove that item. When my visitor reloads the page or goes back to that product's detail page later, I want that toggle button to start 'on' after page load, so my visitor knows that product is already in the cart. I want to use a toggle button because of that built in toggling animation of the element. I'm using <a href="http://www.bootstraptoggle.com" rel="nofollow">Bootstrap Toggle</a> for the toggle button element. What I've done so far is:</p>

<ol>
<li><p>HTML for the button:</p>

<pre><code>&lt;input id="btn_cart_item_toggle" type="checkbox" checked data-toggle="toggle" data-width="270" data-offstyle="danger" data-on="&lt;i class='fa fa-shopping-cart'&gt;&lt;/i&gt; Adicionar ao carrinho" data-off="&lt;i class='fa fa-times'&gt;&lt;/i&gt; Remover do carrinho" width="200" data-style="slow"&gt;
</code></pre></li>
<li><p>I'm passing a Boolean to the controller (in_cart) to tell whether the product was already added to the cart, so I my Blade file I have:</p>

<pre><code>@if ($in_cart)
$(document).ready(function() {
    $('#btn_cart_item_toggle').prop('checked', true).change();
    bootbox.alert('DEBUG: Product in cart');
});
@endif
</code></pre></li>
<li><p>And right after it, I have some jQuery code with Blade-generated stuff to make the AJAX calls (add/remove from cart) using the product's ID.</p>

<pre><code>$('#btn_cart_item_toggle').change(function () {
    if ($(this).prop('checked')) {
        $.post( "{{ route('api_cart_remove') }}", { id: '{{ $product-&gt;id }}' }, function(data) {
            if (data.success) {
                $('span.cart-count').html(data.count);
            } else {
                bootbox.alert('Fail');
            }
        });
    } else {
        $.post( "{{ route('api_cart_add') }}", { 'id': '{{ $product-&gt;id }}' }, function(data) {
            if (data.success) {
                $('span.cart-count').html(data.count);
            } else {
                bootbox.alert('Fail');
            }
        });
    }
});
</code></pre></li>
</ol>

<p>I'm not managing to make that toggle button start 'on' without calling the callbacks. With <code>$('#btn_cart_item_toggle').prop('checked', true).change();</code> the callback functions are called and I get "fail" because it's trying to add the product when it's already in the cart. I want that button to start 'on' without calling that functions if <code>$in_cart</code> is <code>true</code>. <strong>How can I do this? Or what would be a better approach?</strong></p>

<p>It was hard to explain because it involves a lot of things like Blade, jQuery, CSS, and Bootstrap, but I hope I was clear enough.         </p>

<p><strong>UPDATE:</strong></p>

<p>I managed to make it work just as I wanted, based on @CBroe's comment:</p>

<pre><code>&lt;input id="btn_cart_item_toggle" type="checkbox" data-toggle="toggle" @if (!$in_cart) checked @endif data-width="270" data-offstyle="danger" data-on="&lt;i class='fa fa-shopping-cart'&gt;&lt;/i&gt; Adicionar ao carrinho" data-off="&lt;i class='fa fa-times'&gt;&lt;/i&gt; Remover do carrinho" width="200" data-style="slow"&gt;
</code></pre>