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

Posted 2023-05-08

【中文标题】选中复选框时，Twitter Bootstrap 3 崩溃

【英文标题】：Twitter Bootstrap 3 collapse when checkbox checked

【发布时间】：2014-04-24 04:51:20

【问题描述】：

Accordion 必须在选中复选框时折叠。并且在取消选中时必须隐藏。

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

为什么不检查？

            <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>

【问题讨论】：

想进一步详细说明？

【参考方案1】：

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

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

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

【讨论】：

IMO，这是最好的答案。它减少了代码编写量，折叠了正确的元素，并产生了一个行为正确的复选框，它不会采取类似链接的行为和样式。这似乎是这里唯一真正解决 OP 问题的答案。很高兴我也找到了它，因为它也解决了我的问题。

不，如果您快速双击复选框，该区域将显示，但复选框将被取消选中

@BlackICE 不要那么快点击。这是一个很好的答案！

@SpoiledTechie.com 告诉我的用户和 QA

它工作正常，但不适用于我的用例。加载表单时，根据数据库条目选中或取消选中复选框。未选中时，最初可折叠内容不会折叠，当我选中复选框时将折叠。所以在这种情况下，这是错误的方式......

【参考方案2】：

更新：下面有更好的答案...Here -> *

---

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

【讨论】：

是的，它是。但它不像崩溃那样起作用。正如我所说，它必须通过选中复选框来折叠。

@YenneInfo 你能看看我的问题，和这个差不多吗？ ***.com/questions/22480524/…

@bambiinela 请分享您问题的链接

对不起，我放错了链接。这是我的问题：***.com/questions/28517366/…

如果您快速双击该区域将显示的复选框，但该复选框将被取消选中。

【参考方案3】：

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

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

【讨论】：

这似乎是最合乎逻辑的答案，至少在 Firefox 61.0.1 上有效（我不能说上面的包装在标签中的解决方法） - 不过，我的猜测是，指定data-toggle 和 data-target 并不总是适用于 input type="checkbox"

【参考方案4】：

看看吧。 我做到了，效果很好。

<script> 
        $(function () 

            if($('#id_checkbox').prop('checked'))
            
                $('#id_collapse').collapse();
            
        );

</script>

【参考方案5】：

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

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

【参考方案6】：

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

【讨论】：

不鼓励在 SO 上使用链接回答，但没有关于实际解决方案的详细信息。如果链接断开，您的答案就会过时。更不用说观看此视频至少需要 Lynda.com 的试用会员资格。

【参考方案7】：

我知道这是一个老问题，但我在使用 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/

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

PS：代码也可以和https://github.com/gitbrent/bootstrap4-toggle/结合使用

【参考方案8】：

<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>

【讨论】：

欢迎来到 ***。尝试更清楚地解释为什么这是问题的答案。