选中复选框后，Twitter Bootstrap 3崩溃

手风琴必须在选中复选框时折叠。 并且必须在未经检查时隐藏。

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

为什么不检查？

 
 
 
   I have Driver License  
 
 
 
 
 
 A 
 
 B 
 
 C 
 
 D 
 
 E 
 
 
 
 
  

Answer 1

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

Answer 2

这是我的解决方案，通过向复选框添加标签包​​装而不是超链接来工作：

 
   I have Driver License   

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

Answer 3

看它。 我做到了，工作正常。

Answer 4

你甚至不需要初始化.collapse 。 只需将标题更改为：

 
  I have Driver License  

Answer 5

我为折叠手风琴内容开发了一个精美的复选框切换。

 
   
  I have Driver License  

希望你们喜欢 ：-）

小提琴链接： http ： //jsfiddle.net/ajay1008/fkrehhna/

Answer 6

我遇到了同样的问题，我在这个video上找到了答案： http ： //www.lynda.com/Bootstrap-tutorials/Adding-check-box-using-collapse-enhance-usability/161098/176537-4 .html我希望它有所帮助！ 我现在用它来折叠复选框下方的完整div，非常简单。 唯一的问题是如果你快速双击它会搞砸，但它通常不会发生。