@Html.CheckBoxFor() - Change Check Box Label Color

Question

I have dynamically created checkboxes.

<div id="Priv">
@for (var i = 0; i < Model.Categories.Count; i++)
{
    <div>
        @Html.CheckBoxFor(m => Model.Categories[i].AllChecked, new { id = Model.Categories[i].CategoryID, @class = "parentChk" })
        @Html.HiddenFor(m => Model.Categories[i].CategoryName)
        <strong>@Model.Categories[i].CategoryName</strong>
        <br />
        @*@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, "")
        }
        <br />
    </div>
}

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:
<input class="childChk" data-val="true" data-val-required="The Checked field is required."id="Categories_0__Privileges_1__Checked" name="Categories[0].Privileges[1].Checked" type="checkbox" value="true">

EDIT:

1. CSS:

<style>

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:

<script type="text/javascript">
$(".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:

<div id="Priv">
@for (var i = 0; i < Model.Categories.Count; i++)
{
    <div>
        @Html.CheckBoxFor(m => Model.Categories[i].AllChecked, new { id = Model.Categories[i].CategoryID, @class = "parentChk" })
        @Html.HiddenFor(m => Model.Categories[i].CategoryName)
        <strong>@Model.Categories[i].CategoryName</strong>
        <br />
        @*@Html.JTDisplayTextFor(m => Model.Categories[i].CategoryName, "")*@
        @for (var p = 0; p < Model.Categories[i].Privileges.Count; p++)
        {
             <div class="sch_cal_row">
             @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, "")
         </div>

       }
     <br />
     </div>
}
</div>

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

Answer 1

Please consider the following:

This should work on most html including your MVC3/4/5 Generated HTML via the Helpers:)

$('input[type=checkbox]').each(function(){
   if(this.checked==true){           
   $(this).prev('label').css('color','red');
}
else
{
   $(this).prev('label').css('color','green');
}
});

$('input[type=checkbox]').click(function(){
    if(this.checked==true)
{
    $(this).prev('label').css('color','red');
 }
 else
 {
    $(this).prev('label').css('color','green');
 }
 });

http://jsfiddle.net/7uhWc/

Answer 2

According to our long discussion, here is the solution:
HTML

<div class="sch_cal_row">
    <input type='checkbox' class="childChk" />
    <input type='checkbox' class="childChk" checked />
</div>

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;
}

JS Code

$(".childChk").click(function () {
    if($(".childChk:checked").length > 0){
        $(this).parent().removeClass().addClass("highlight");
    } else{
        $(this).parent().removeClass().addClass("high1");
    }
});

WORKING DEMO

Answer 3

For page load

$(document).ready(function(){

 $('.childChk').each(function(){

   if(this.checked==true){    
      $(this).toggleClass("green");
   }

 });

 //Whenever you click a check box

  $('.childChk').click(function(){

    if(this.checked==true){

      $(this).toggleClass("green");
    }

  });

});