Twitter Bootstrap 3 effondrement lors de la case cochée

Accordéon ont à s'effondrer sur la case cochée. Et doit être caché lorsqu'il est décoché.

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

Pourquoi il n'a pas les chèques?

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

Soin de préciser davantage?

InformationsquelleAutor Dj.Sunrise | 2014-03-18

11

Mise à JOUR : Il y a une Meilleure Réponse ci-Dessous ... Ici -> *

JS (Violon: 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;
    }
});
```
Mise à JOUR (Violon: 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;
    }
});
```
- Oui,Il cheks. Mais Ça ne fonctionne pas comme l'effondrement. Comme je l'ai dit Il collpase en cochant une case à cocher.
- Pouvez-vous s'il vous plaît regarder à ma question, c'est quasiment le même que celui-ci? stackoverflow.com/questions/22480524/...
- partager le lien de votre question, veuillez
- Désolé, j'ai mis le lien faux. Voici ma question: stackoverflow.com/questions/28517366/...
- si vous double-cliquez rapidement sur la case à cocher de la zone allons le montrer, mais la case sera cochée.
- Vous pouvez également cocher la case, de la développer, puis décochez la case et il reste affiché.
- Je vous suggère de lire les mises à jour de la partie... Il résout le problème que vous parlez...
InformationsquelleAutor Pimento Web
62

Voici ma solution, fonctionne par l'ajout d'une étiquette de wrapper pour la case à cocher à 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/
- IMO, c'est la meilleure réponse ici. Il entraîne le moins de code à écrire, s'effondre le bon élément(s), et les rendements correctement-se comporter de la case à cocher ne pas prendre sur le lien-comme le comportement & style. Cela semble être la seule réponse qui résout effectivement le cas des OP question. Heureux je l'ai trouvé, aussi, parce qu'il a résolu mon problème.
- Non, si vous double-cliquez rapidement sur la case à cocher de la zone allons le montrer, mais la case sera cochée
- ne cliquez pas si vite ensuite. C'est une excellente réponse!
- dis à mes utilisateurs et contrôle de la qualité qui
InformationsquelleAutor Gavin
4

Vous n'avez même pas besoin d'initialiser .collapse. Il vous suffit de changer l'en-tête de:

HTML:
```
<h4 class="panel-title">
  <input type="checkbox" value="" data-toggle="collapse" data-target="#collapseOne" /> I have Driver License	
</h4>
```
- ce qui me semble le plus logique de réponse qui fonctionne, au moins sur Firefox 61.0.1 (quelque chose que je ne peut pas dire à propos de l'emballage-dans-un-label solution de contournement ci-dessus) - ma conjecture est, cependant, que la spécification de données de la bascule des données et de la cible n'a pas toujours été de travailler pour input type="checkbox"
InformationsquelleAutor Igor Mizak

De le regarder.
Je l'ai fait et fonctionne très bien.

<script> 
        $(function () {

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

</script>

InformationsquelleAutor LegustasBR

J'ai développé une fantaisie case à bascule pour l'effondrement de l'accordéon de contenu.

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

Espère que vous les gars comme ça 🙂

Violon Lien: http://jsfiddle.net/ajay1008/fkrehhna/

InformationsquelleAutor Ajay.R1008

0

J'ai été confrontée 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-usability/161098/176537-4.html
J'espère que cela aide!
Je l'utilise maintenant à l'effondrement complet d'un div en dessous d'une case à cocher, très simple.
Le seul problème est que si vous double-cliquez rapidement, il se sali, mais en général cela ne marche pas passé.
- Les réponses avec des liens, mais pas de détails sur la solution réelle, sont découragés sur DONC. Si le lien est rompu, votre réponse devient obsolète. Pour ne pas mentionner que le visionnement de cette vidéo nécessite au moins un abonnement d'essai à Lynda.com.
InformationsquelleAutor Hugo Tognolo

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

Bienvenue sur StackOverflow. Essayer d'expliquer plus clairement pourquoi c'est une réponse à la question.

InformationsquelleAutor Rolando

Je sais que c'est une vieille question, mais j'ai eu des soucis avec Firefox et le Rechargement de pages qui pourrait laisser la case cochée et que le contenu caché - pas une bonne expérience de l'utilisateur.

De l'OMI, il est plus facile de simplement ajouter/supprimer la classe pour masquer/afficher le contenu en fonction de l'état de la case à cocher.

Voici mon code d'exemple pour ce


$(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");
                }
        }
    )
});

Comme vous pouvez le voir, vous devez simplement ajouter les data-toggle=toggle et la data-target élément de votre entrée comme ceci:

<input id="license" type="checkbox" data-toggle="toggle" data-target="#collapseOne"><label for="license">I have Driver License</label>

Un exemple peut être trouvé ici:
https://jsfiddle.net/Kound/z95cLt86/8/

Le code fonctionne pour bootstrap 3 (.in) et bootstrap 4 (.show). L'adopter pour vos besoins.

PS: Le code fonctionne aussi avec la combinaison https://github.com/gitbrent/bootstrap4-toggle/

InformationsquelleAutor Kound

Vous devez vous connecter pour publier un commentaire.