选中复选框时 Twitter Bootstrap 3 崩溃

选中复选框时

关注

发信

关注(28)粉丝(399)

选中复选框时 Twitter Bootstrap 3 崩溃

本文介绍了选中复选框时 Twitter Bootstrap 3 崩溃的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

手风琴必须在选中的复选框上折叠.并且在未选中时必须隐藏.

这是代码:http://jsfiddle.net/UwL5L/2/

为什么不检查?

 
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><input type="checkbox" value="">我有驾照</a>
<div id="collapseOne" class="panel-collapse 折叠在"><div class="panel-body"><div class="driving-license-kind"><div class="checkbox"><input type="checkbox" value="">A

<div class="checkbox"><input type="checkbox" value="">B

<div class="checkbox"><input type="checkbox" value="">C

<div class="checkbox"><input type="checkbox" value="">D

<div class="checkbox"><input type="checkbox" value="">E

解决方案

更新:下面有更好的答案... 这里 -> *

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

$('.collapse').collapse();//不要在复选框点击时折叠$('.panel-heading h4 a input[type=checkbox]').on('click', function(e) {e.stopPropagation();});//如果未选中则取消显示事件$('#collapseOne').on('show.bs.collapse', function(e) {if(!$('.panel-heading h4 a input[type=checkbox]').is(':checked')){返回假；}});

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

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

Accordion have to collapse on checked checkbox. And must be hidden when it's uncheked.

Here is code : http://jsfiddle.net/UwL5L/2/

Why it doesn't checks?

            <div class="panel-group driving-license-settings" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                <input type="checkbox" value=""> I have Driver License
                            </a>
                          </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="driving-license-kind">
                                <div class="checkbox">
                                    <input type="checkbox" value="">A
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" value="">B
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" value="">C
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" value="">D
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" value="">E
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

解决方案

UPDATE : There is a Better Answer Below ... Here -> *

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;
    }
});

UPDATE (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;
    }
});

这篇关于选中复选框时 Twitter Bootstrap 3 崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-15 05:49