Twitter Bootstrap 3 рушится, когда установлен флажок

ОБНОВЛЕНИЕ: Ниже приведен лучший ответ... Здесь -> *

JS (Fiddle: 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;
    }
});

ОБНОВЛЕНИЕ (Fiddle: 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;
    }
});

Вот мое решение, которое работает, добавляя оболочку метки к флажку вместо гиперссылки:

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

http://jsfiddle.net/L0h3s7uf/1/

Вам даже не нужно инициализировать .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 и перезагрузкой страниц, из-за которых флажок оставался установленным, а содержимое скрыто - не очень хороший пользовательский опыт.

IMO, проще всего просто добавить/удалить класс для скрытия/отображения контента в зависимости от состояния флажка.

Вот мой пример кода для этого

$(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/

PS: код также работает в сочетании с https://github.com/gitbrent/bootstrap4-toggle/