By checking the box selected when loading from code
I am loading the checkboxlist into the code behind like this:
'load the fuel types into the checklist box
For Each newitem As String In GetFuelTypes(Request.PhysicalApplicationPath & "OtherDataFiles\dataXML.xml")
cblFuelstoDisplay.Items.Add(New ListItem(newitem))
Next
I am using the following jquery to change the css style when checking an element;
$(document).ready(function () {
$("#cbxarea").on("change", ":checkbox", function () {
$(this).siblings("label").toggleClass("checkboxselected", $(this).is(":checked"));
});
});
and it works great. BUT, I am setting the first checkboxlist item selected in aspx codebehind and you CANNOT set the css style there. How do I change the page load style in jquery after doc.ready? I tried adding this to the script but it didn't work
$("#cbxarea:checkbox").each(function () {
if( $(this).is(":checked")) {
$(this).toggleClass("checkboxselected");
}
});
Here is the markup for the checkbox
<fieldset style="height:140px;">
<legend>Select a Fuel Type to Display</legend>
<div id="cbxarea" class="checkbox">
<asp:CheckBoxList ID="cblFuelstoDisplay" runat="server" AutoPostBack="True" >
</asp:CheckBoxList>
</div>
</fieldset>
+3
source to share
1 answer
You must use a space between the selectors, nor are you selecting cathedral shortcut elements.
$("#cbxarea input[type=checkbox]:checked")
.siblings('label')
.addClass("checkboxselected");
You can also trigger a change event:
$("#cbxarea").on("change", "input[type=checkbox]", function() {
$(this).siblings("label").toggleClass("checkboxselected", this.checked);
}).change();
Note that if your checkboxes are static then there is no need to use event delegation.
$("#cbxarea input[type=checkbox]").on("change", function() { }).change();
+2
source to share