0
Good afternoon.
Problem solved: I really thought it was strange that it worked out here and I came to the conclusion that it might be the fact that the checkbox(s) dynamically generated. And that’s what it was! The solution was to put change inside the Ajax Success function, right after the checkbox(s) were printed on the screen. It looked something like this:
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 was the last of the attempts I made, trying to make it work.
The command $('form[name="rlManejo"]'). ajaxForm(options). Submit(); is part of the malsup library (jQuery Form Plugin: http://jquery.malsup.com/form/#ajaxForm) we are using for this application (if anyone wants to know/understand).
Thank you all so much for trying to help. In the end that was the problem.
Big hug!
Primary problem:
When I mark/uncheck the checkbox, the alert (used only for testing) does not appear.
The label changes color as programmed in the CSS, but the checkbox is not checked (checked via Google Chrome/Elements). No error message on console either.
It looks the same to me as @Victor Carnaval posted in response and it works here on Stack, but not on my website. It’s the only element that’s giving trouble.
jquery/javascript code:
$('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; }
How it works if you do the
onChange()in that element 'form[name="rlManejo"] that doesn’t exist?– LeAndrade
Good afternoon, @Leandrade. In my code the div is inside the form with this name.
– E. Coelho
Okay, so, a tip. Every time you ask a question, put as much information as possible with all parts of the code in question.
– LeAndrade