Resolve conflict of Toogles bootstrap and Checkbox

1

I have a problem that I could not resolve, I have toggle done in bootstrap that conflicts with a checkbox on my page, I have a checkbox when clicking to check / uncheck toggle is triggered.

The code for my checkbox is this:

<input id="MarcaDesmarca" type="checkbox" name="MarcaDesmarca" />
$(function () {
    $('#MarcaDesmarca').click(function () {
        var val = this.checked;
        $("input[name='Lista[]']").each(function(){
            $(this).prop('checked', val);
        });
    });
});

The image of what I have is this:

Thestructurelookslikethis:

<divclass="toggle toggle-transparent toggle-bordered-full margin-top-20">
         <div class="row">           
            <div class="col-sm-5">Descrição</div>
            <div class="col-sm-4">Nome</div>
            <div class="col-sm-2">Data</div>
            <div class="col-sm-1"><input id="MarcaDesmarca" type="checkbox" name="MarcaDesmarca" /></div>                
        </div> 

<!-- CABEÇALHO DO TOGGLE !-->
    <?php foreach ($Resultado as $Retorno) {  

        $IdUnicoop = $Retorno->IdUnicoop; 

        // UNIDADE
        $sqlUnicoop = "SELECT * 
                         FROM 'cadUnicoop' 
                        WHERE 'IdUnicoop' = ?
                          AND 'Ativo' = 1                                             
                        ORDER BY Nome ASC";
        $arrayUnicoop  = array($IdUnicoop);
        $ResUnicoop = $crud->getSQLGeneric($sqlUnicoop, $arrayUnicoop, TRUE);

        // NOME DA UNIDADE
        foreach ($ResUnicoop as $NomeUnicoop) { 
            $NomeUnicoop->Nome;
        }                   

    ?>       
<div class="toggle">
    <label>
         <div class="row">  
            <div class="col-sm-5"><?php echo $Retorno->Descricao; ?></div>
            <div class="col-sm-4"><?php echo $NomeUnicoop->Nome; ?></div>
            <div class="col-sm-2"><?php echo implode("/", array_reverse(explode("-", $Retorno->Data))); ?></div>
            <div class="col-sm-1"><input type="checkbox" name="Lista[]" value="<?php echo $Retorno->IdOrdem; ?>" /></div>
        </div>  

    </label>
    <!-- CONTEÚDO DO TOGGLE !-->
    <div class="toggle-content">
         <div class="row">  
            <div class="col-sm-3"><?php echo $Retorno->Produto; ?></div>
            <div class="col-sm-3"><?php echo $Retorno->Safra; ?></div>
            <div class="col-sm-3"><?php echo $Retorno->Peso; ?></div>
            <div class="col-sm-3"><?php echo $Retorno->Valor; ?></div>
        </div>     
    </div>
</div>
<?php } ?>

Function Toggle

    function _toggle() {

    var $_t = this,
        previewParClosedHeight = 25;

    jQuery("div.toggle.active > p").addClass("preview-active");
    jQuery("div.toggle.active > div.toggle-content").slideDown(400);
    jQuery("div.toggle > label").click(function(e) {

        var parentSection   = jQuery(this).parent(),
            parentWrapper   = jQuery(this).parents("div.toggle"),
            previewPar      = false,
            isAccordion     = parentWrapper.hasClass("toggle-accordion");

        if(isAccordion && typeof(e.originalEvent) != "undefined") {
            parentWrapper.find("div.toggle.active > label").trigger("click");
        }

        parentSection.toggleClass("active");

        if(parentSection.find("> p").get(0)) {

            previewPar                  = parentSection.find("> p");
            var previewParCurrentHeight = previewPar.css("height");
            var previewParAnimateHeight = previewPar.css("height");
            previewPar.css("height", "auto");
            previewPar.css("height", previewParCurrentHeight);

        }

        var toggleContent = parentSection.find("> div.toggle-content");

        if(parentSection.hasClass("active")) {

            jQuery(previewPar).animate({height: previewParAnimateHeight}, 350, function() {jQuery(this).addClass("preview-active");});
            toggleContent.slideDown(350);

        } else {

            jQuery(previewPar).animate({height: previewParClosedHeight}, 350, function() {jQuery(this).removeClass("preview-active");});
            toggleContent.slideUp(350);

        }

    });
}
    
asked by anonymous 16.11.2016 / 12:38

1 answer

1

This is not a conflict, what is happening is that in your code, the toggle is set to activate when it clicks on the entire header area, including the checkboxes that are part of it, for example:

Ideally,youshoulddefinealocationwherethetoggleshouldbeactivated,eitherintheusernameorinthearrow,forexample:

So after structuring correctly, your problem will be solved.

    
16.11.2016 / 14:10