web-dev-qa-db-ja.com

Twitter Bootstrap 3チェックボックスをオンにすると折りたたまれます

チェックボックスをオンにすると、アコーディオンを折りたたむ必要があります。そしてそれがチェックされていないときは隠されていなければなりません。

これがコードです： 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>
javascriptjquerytwitter-bootstraptwitter-bootstrap-3jquery-ui-accordion
12
Dj.Sunrise

UPDATE：以下により良い答えがあります... ここ-> *

[〜＃〜] 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;
    }
});
11
Pimento Web

これが私の解決策です。ハイパーリンクの代わりにラベルラッパーをチェックボックスに追加することで機能します。

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

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

62
Gavin

それを見ろ。私はそれをし、うまくいきました。

<script> 
        $(function () {

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

</script>
3
LegustasBR

初期化する必要さえありません.collapse。ヘッダーを次のように変更してください：

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

アコーディオンのコンテンツを折りたたむための豪華なチェックボックストグルを開発しました。

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

1
Ajay.R1008

私は同じ問題に直面しており、このビデオで答えを見つけました： http://www.lynda.com/Bootstrap-tutorials/Adding-check-box-using-collapse-enhance-usability/161098 /176537-4.html お役に立てば幸いです。チェックボックスの下のdiv全体を折りたたむために使用しています。非常に簡単です。唯一の問題は、すばやくダブルクリックすると混乱するが、通常は発生しないことである。

0
Hugo Tognolo

私はそれが古い質問であることを知っていますが、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/

コードはbootstrap 3（.in）およびbootstrap 4（.show）。あなたのニーズにそれを採用。

PS：コードは https://github.com/gitbrent/bootstrap4-toggle/ と組み合わせても機能します

0
Kound
<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>
0
Rolando