Solve Toogles bootstrap and Checkbox conflict

Question

I have a problem I couldn’t solve, I have a toggle done in bootstrapthat is in conflict with a checkbox on my page, I have a checkbox that by clicking to mark/uncheck the toggle is triggered.

The code to 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:

The structure is like this:

<div class="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);

        }

    });
}

Answer 1

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

Ideally you should define a location where toggle should be activated, or in the user name, or in the arrow, for example:

So after you structure correctly, your problem will be solved.