Boa tarde.
Problema resolvido: Realmente achei estranho dar certo aqui e cheguei a conclusão de que poderia ser o fato do grupo de checkbox(es) ser gerado dinamicamente. E era isso mesmo! A solução foi colocar change dentro da função success do Ajax, logo após os checkbox(es) serem impressos na tela. Ficou mais ou menos assim:
function getLotes(){
var options = {
url: "formhelper.php",
type: "POST",
data: {acao: 'getLotes'},
success: function (data) {
$('.lote-checkbox').empty().html(data));
$('input[id^="lotebox"]').on('change', function(){
alert('checou ou não checou');
});
}
};
$('form[name="rlManejo"]').ajaxForm(options).submit();
}
lotebox foi a última das tentativas que fiz, tentando fazer dar certo.
O comando $('form[name="rlManejo"]').ajaxForm(options).submit(); faz parte da biblioteca malsup (jQuery Form Plugin: http://jquery.malsup.com/form/#ajaxForm) que estamos usando para essa aplicação (caso alguém queira saber/entender).
Muito obrigado a todos por tentarem ajudar. No final o problema era esse.
Grande abraço!
Problema primário:
Quando marco/desmarco o checkbox, o alerta (usado só para teste) não aparece.
O label muda de cor, como programado no CSS, mas o checkbox não é dado como checked (verificado via Google Chrome/Elements). Também não há mensagem de erro no console.
Me parece igual ao que o @Victor Carnaval postou como resposta e funciona aqui no Stack, mas no meu site não. É o único elemento que está dando problema.
Código jquery/javascript:
$('form[name="rlManejo"] input[name="lote[]"]').on('change', function(){
alert('checou ou não checou');
});
HTML:
<form name="rlManejo"><!-- incorporado em edição aqui, mas presente no código original -->
<div class="select-checkbox">
<button type="button" class="select-checkbox-btn">Lotes</button>
<div class="select-checkbox-content lote-checkbox">
<input type="checkbox" name="lote[]" id="lote-checkbox0" value="1">
<label for="lote-checkbox0">Lote 1</label>
<input type="checkbox" name="lote[]" id="lote-checkbox1" value="2">
<label for="lote-checkbox1">Lote 2</label>
</div>
</div>
</form><!-- incorporado em edição aqui, mas presente no código original -->
CSS:
.select-checkbox-btn {
padding: 7px !important;
border: 1px solid #DDD !important;
color: #FFF !important;
background-color: #003eff !important; /* #FF6347 */
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.21)) !important;
cursor: pointer !important;
border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
}
.select-checkbox {
width: auto !important;
height: auto !important;
margin: 10px 8px 0 0 !important;
position: relative !important;
display: inline-block !important;
}
.select-checkbox-content {
display: none !important;
position: absolute !important;
width: auto !important;
height: auto !important;
background-color: #f9f9f9 !important;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important;
z-index: 1 !important;
}
.select-checkbox-content input[type=checkbox]{ display: none !important; }
.select-checkbox-content input[type=checkbox] + label{
color: black !important;
width: auto !important;
padding: 5px 3px !important;
border: #000 1px solid !important;
text-decoration: none !important;
display: block !important;
cursor: pointer !important;
}
.select-checkbox-content input[type=checkbox]:checked + label{
background-color: #2F4F4F !important;
color: white !important;
}
.select-checkbox-content input:hover {background-color: #f1f1f1 !important; }
.select-checkbox:hover .select-checkbox-content{ display: block !important; }
.select-checkbox:hover .select-checkbox-btn{ display: block !important; }
form[name="getDespesas"] .select-checkbox-content, form[name=D2R] .select-checkbox-content{ width: 200px !important; }
onChange()
nesse elemento 'form[name="rlManejo"] que não existe?