I have dynamically created checkboxes.
@for (var i = 0; i < Model.Categories.Count; i++)
{
@Html.CheckBoxFor(m => Model.Categories[i].AllChecked, new { id = Model.Categories[i].CategoryID, @class = "parentChk" })
@Html.HiddenFor(m => Model.Categories[i].CategoryName)
@Model.Categories[i].CategoryName
@*@Html.JTDisplayTextFor(m => Model.Categories[i].CategoryName, "")*@
@for (var p = 0; p < Model.Categories[i].Privileges.Count; p++)
{
@Html.HiddenFor(m => Model.Categories[i].Privileges[p].PrivilegeID)
@Html.HiddenFor(m => Model.Categories[i].Privileges[p].PrivilegeName)
@Html.CheckBoxFor(m => Model.Categories[i].Privileges[p].Checked, new { @class = "childChk" })
@Html.JTDisplayTextFor(m => Model.Categories[i].Privileges[p].PrivilegeName, "")
}
}
What I need to do is:
When the page loads some of the check boxes are going to be checked and some not. If I uncheck a check box it should change the check box label background to red and if I check a check box that was not checked it should change the check box label background to green.
Can any one help me please?
Edit:
This is the Html of one of the generated checkboxes:
EDIT:
1. CSS:
div.sch_cal_row {
margin-top: 0px;
margin-left: 0px;
width: 300px;
border-radius: 3px;
height: 20px;
}
div.highlight {
width: 300px;
height: 20px;
background-color: #E0FBD9;
}
div.high1 {
width: 300px;
height: 20px;
background-color: #FFA07A;
}
div.available {
width: 100px;
height: 46px;
background-color: #A8A69C;
}
2. JS:
$(".childChk").click(function () {
if ($(this).is(':checked')) {
$(this).parent().removeClass();
$(this).parent().addClass("highlight");
} else {
$(this).parent().removeClass("highlight");
$(this).parent().addClass("high1");
}
});
3. Html/Razor:
@for (var i = 0; i < Model.Categories.Count; i++)
{
@Html.CheckBoxFor(m => Model.Categories[i].AllChecked, new { id = Model.Categories[i].CategoryID, @class = "parentChk" })
@Html.HiddenFor(m => Model.Categories[i].CategoryName)
@Model.Categories[i].CategoryName
@*@Html.JTDisplayTextFor(m => Model.Categories[i].CategoryName, "")*@
@for (var p = 0; p < Model.Categories[i].Privileges.Count; p++)
{
@Html.HiddenFor(m => Model.Categories[i].Privileges[p].PrivilegeID)
@Html.HiddenFor(m => Model.Categories[i].Privileges[p].PrivilegeName)
@Html.CheckBoxFor(m => Model.Categories[i].Privileges[p].Checked, new { @class = "childChk" })
@Html.JTDisplayTextFor(m => Model.Categories[i].Privileges[p].PrivilegeName, "")
}
}
I have the above code that changes the parrent div background color when you click on the check box. But what I also need is:
On load or when a option from a drop down menu is changed the check state of some of the boxes changes. I need to get the function to change the colour of the divs when the check state is automatically changed by selecting another item from the drop down menu