当复选框被选中时，Twitter Bootstrap 3崩溃

这是我的解决方案，通过在复选框中添加标签包装器而不是超链接:

<div class="checkbox">
    <label data-toggle="collapse" data-target="#collapseOne">
        <input type="checkbox"/> I have Driver License  
    </label>
</div>

更新:下面有一个更好的答案…此处-> *

JS (小提琴: http://jsfiddle.net/h44PJ/):

$('.collapse').collapse();
// Don't collapse on checkbox click
$('.panel-heading h4 a input[type=checkbox]').on('click', function(e) {
    e.stopPropagation();
});
// Cancel show event if not checked
$('#collapseOne').on('show.bs.collapse', function(e) {
    if(!$('.panel-heading h4 a input[type=checkbox]').is(':checked'))
    {
        return false;
    }
});

(小提琴: http://jsfiddle.net/h44PJ/567/):

$('.collapse').collapse();
$('.panel-heading h4 a input[type=checkbox]').on('click', function(e) {
    e.stopPropagation();
    $(this).parent().trigger('click');   // <---  HERE
});
$('#collapseOne').on('show.bs.collapse', function(e) {
    if(!$('.panel-heading h4 a input[type=checkbox]').is(':checked'))
    {
        return false;
    }
});

您甚至不需要初始化.collapse。只需将标题改为:

<h4 class="panel-title">
  <input type="checkbox" value="" data-toggle="collapse" data-target="#collapseOne" /> I have Driver License	
</h4>

看。我这样做了，效果很好。

<script> 
        $(function () {
            if($('#id_checkbox').prop('checked'))
            {
                $('#id_collapse').collapse();
            }
        });
</script>

我开发了一个用于折叠手风琴内容的复选框。

<h4 class="panel-title">
    <label data-toggle="collapse" data-target="#collapseOne" class="control-toggle">
        <input type="checkbox" />
        <div class="toggle-button"></div>
    </label>
    I have Driver License   
</h4>

希望你们喜欢:-)

提琴链接:http://jsfiddle.net/ajay1008/fkrehhna/

我也面临着同样的问题，我在这个视频中找到了答案:http://www.lynda.com/Bootstrap-tutorials/Adding-check-box-using-collapse-enhance-usability/161098/176537-4.html我希望这对你有帮助!我现在用它来折叠一个完整的div下面的复选框，非常简单。唯一的问题是，如果你快速双击它，它会变得混乱，但通常不会发生。

我知道这是一个老问题，但是我在使用Firefox和重新加载页面时遇到了一些麻烦，这会使复选框被选中并且内容隐藏-这不是一个好的用户体验。

在我看来，根据复选框的状态添加/删除隐藏/显示内容的类是最简单的。

下面是我的示例代码

$(document).ready(function()
{
    $('input[type=checkbox][data-toggle^=toggle]').on('change',
          function (e) {
                let checkbox = $(this);
                let target=$(checkbox.data('target'));
                if (checkbox.is(":checked")) {
                    target.addClass("show");
                    target.addClass("in");
                } else {
                    target.removeClass("show");
                    target.removeClass("in");
                }
            }
    );
    /* Make sure the state is correct - especially after Pressing F5 */
    $('input[type=checkbox][data-toggle^=toggle]').each(
        function (index, elem) {
                let checkbox = $(this);
                let target=$(checkbox.data('target'));
                if (checkbox.is(":checked")) {
                    target.addClass("show");
                    target.addClass("in");
                } else {
                    target.removeClass("show");
                    target.removeClass("in");
                }
        }
    )
});

正如你所看到的，你必须简单地将data-toggle=toggle和data-target元素添加到你的输入中，像这样:

<input id="license" type="checkbox" data-toggle="toggle" data-target="#collapseOne"><label for="license">I have Driver License</label>

可以在这里找到一个例子:https://jsfiddle.net/Kound/z95cLt86/8/

代码适用于引导3 (.in)和引导4 (.show)。根据你的需要采用它。

PS:代码也可以与https://github.com/gitbrent/bootstrap4-toggle/

<input type="checkbox" data-toggle="collapse" data-target="#demo" uncheck/>I have Driver License
<div id="demo" class="collapse">
<label>What you want collapse</label>
</div>