為什么 Bootstrap 3 折疊與雙擊復選框狀態不同步？

Question

根據這個問題：“ 選中復選框時 Twitter Bootstrap 3 崩潰”我已經嘗試過這個解決方案，因為它既簡單又干凈。

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

<div class="panel-group driving-license-settings" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
                                      <div class="checkbox">
                <label data-toggle="collapse" data-target="#collapseOne">
                    <input type="checkbox"/> I have Driver License  
                </label>
            </div>
                                  </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>

但是有了這個“解決方案”，你就有了問題。 如果您太快地單擊復選框，該區域會折疊，但復選框會被選中。

我怎樣才能防止這個雙擊問題？

我在用：

• 引導程序 3
• jQuery 3.1.1

Answer 1

因為在bootstrap中沒有專門用於切換的雙擊處理，所以我想出了一個特殊的工作來雙擊同步。

我剛剛刪除了data-toggle="collapse"屬性，將#testCheckBox id添加到了checkbox的父div ，我做了一些自定義腳本，檢測是否雙擊或單擊然后驗證復選框值並切換它們的基礎：

$('.collapse').collapse();

$("#testCheckBox :checkbox").bind('click dblclick', function(evt) {
    console.log(evt.type);

    if ($(this).is(":checked")) {
        $('.collapse').slideDown('fast');
    } else {
        $('.collapse').slideUp('fast');
    }
})

演示： https ： //jsbin.com/ciloliweto/edit？html，output

Answer 2

折疊時禁用復選框：

http://jsfiddle.net/L0h3s7uf/220/

<input id="license_check_box" type="checkbox"/> I have Driver License   

$('.collapse').on('show.bs.collapse hide.bs.collapse', function() {
    $('#license_check_box').prop('disabled', true);
}).on('shown.bs.collapse hidden.bs.collapse', function() {
    $('#license_check_box').prop('disabled', false);
});

Answer 3

這是從@IanMetten 復制的通用解決方案，用於獲取所有和修復可折疊控件。

$('[data-toggle="collapse"]').each(function() {
        var $control=$(this);       
        var $target=$($control.attr("data-target"));
        $target.on('show.bs.collapse hide.bs.collapse', function() {
            $control.prop('disabled', true);
        }).on('shown.bs.collapse hidden.bs.collapse', function() {
            $control.prop('disabled', false);
        });
    });

Answer 4

我認為這對你有用

 $('.collapse').collapse() $("#check").one('click', function (event) { event.preventDefault(); //do something }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <style> .panel-body { padding: 4px 50px; } </style> <div class="panel-group driving-license-settings" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <div class="checkbox"> <label data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> <input type="checkbox" id="check"/> I have Driver License </label> </div> </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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>