Estou com um problema que não consegui resolver, tenho um toggle
feito em bootstrap
que está em conflito com um checkbox
em minha página, tenho um checkbox
que ao ao clicar para marca/desmarca o toggle
é acionado.
O código do meu checkbox é esse:
<input id="MarcaDesmarca" type="checkbox" name="MarcaDesmarca" />
$(function () { $('#MarcaDesmarca').click(function () { var val = this.checked; $("input[name='Lista[]']").each(function(){ $(this).prop('checked', val); }); }); });
A imagem do que tenho é essa:
A estrutura está assim:
<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 } ?>
Função 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);
}
});
}