web-dev-qa-db-fra.com

Twitter Bootstrap 3 réduit lorsque la case est cochée

L'accordéon doit être coché. Et doit être caché quand il est libéré.

Voici le code: http://jsfiddle.net/UwL5L/2/

Pourquoi ça ne vérifie pas? 

            <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
8
Dj.Sunrise

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;
    }
});
9
Pimento Web

Voici ma solution, fonctionne en ajoutant un wrapper d'étiquette à la case à la place d'un lien hypertexte:

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

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

57
Gavin

Regarde ça. Je l'ai fait et fonctionne bien.

<script> 
        $(function () {

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

</script>
3
LegustasBR

Vous n'avez même pas besoin d'initialiser .collapse. Il suffit de changer votre entête pour:

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

1
Igor Mizak

J'ai développé une bascule de case à cocher élégante pour réduire le contenu en accordéon.

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

J'espère que vous aimez ça :-)

Lien de violon: http://jsfiddle.net/ajay1008/fkrehhna/

1
Ajay.R1008

Je faisais face au même problème et j'ai trouvé la réponse sur cette vidéo: http://www.lynda.com/Bootstrap-tutorials/Adding-check-box-using-collapse-enhance- utilisabilité/161098/176537-4.html J'espère que cela aide! Je l'utilise maintenant pour réduire un div complet en dessous d'une case à cocher, très simple. La Le seul problème, c’est que si vous double-cliquez dessus rapidement, vous vous frayez un coup, mais cela ne se produit généralement pas.

0
Hugo Tognolo