如何在页面加载后启动Bootstrap切换按钮，如果启用则不调用回调

Question

我一直在使用Laravel 5进行电子商务。在每个产品的详细信息页面中，我希望访问者点击切换按钮将该项目添加到购物车，然后再次单击以删除该项目。 当我的访问者重新加载页面或稍后返回该产品的详细信息页面时，我希望切换按钮在页面加载后开始“打开”，因此我的访问者知道产品已经在购物车中。 我想使用切换按钮，因为内置的元素切换动画。 我正在使用Bootstrap Toggle作为切换按钮元素。 到目前为止我所做的是：

1. 按钮的HTML：

    <input id="btn_cart_item_toggle" type="checkbox" checked data-toggle="toggle" data-width="270" data-offstyle="danger" data-on="<i class='fa fa-shopping-cart'></i> Adicionar ao carrinho" data-off="<i class='fa fa-times'></i> Remover do carrinho" width="200" data-style="slow"> 

2. 我将一个布尔值传递给控制器​​（in_cart），以告知产品是否已经添加到购物车中，所以我的刀片文件是：

    @if ($in_cart) $(document).ready(function() { $('#btn_cart_item_toggle').prop('checked', true).change(); bootbox.alert('DEBUG: Product in cart'); }); @endif 

3. 在它之后，我有一些带有Blade生成的东西的jQuery代码，用于使用产品ID进行AJAX调用（从购物车添加/删除）。

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

我没有设法让切换按钮在不调用回调的情况下启动。 使用$('#btn_cart_item_toggle').prop('checked', true).change(); 回调函数被调用，我得到“失败”，因为它正在尝试添加产品，当它已经在购物车中。 如果$in_cart为true ，我希望该按钮在没有调用该函数的情况下启动'on'。 我怎样才能做到这一点？ 或者什么是更好的方法？

这很难解释，因为它涉及很多东西，如Blade，jQuery，CSS和Bootstrap，但我希望我足够清楚。

更新：

根据@Cabroe的评论，我设法让它按照我想要的方式工作：

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

Answer 1

我不会这样做客户端 - 而是编辑输出此输入元素的模板以包含要开始的checked属性（如果适用）。

（这也应该使它“更快”，这意味着用户将在页面加载时看到正确的状态，而不仅仅是在JS运行之后。）