@ Html.CheckBoxFor () - Изменить цвет метки флажка

У меня есть динамически созданные флажки.

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

Что мне нужно сделать:

Когда страница загружается, некоторые флажки будут проверяться, а некоторые нет. Если я сниму флажок, он должен изменить фон метки флажка на красный, и если я поставлю флажок, который не был проверен, он должен изменить фон метки флажка на зеленый.

Кто-нибудь может мне помочь?

Редактировать:

Это Html одного из сгенерированных флажков:
<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">

РЕДАКТИРОВАТЬ:

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>

У меня есть код выше, который меняет цвет фона parrent div, когда вы нажимаете на этот флажок. Но мне также нужно:

При загрузке или при изменении параметра из выпадающего меню изменяется состояние проверки некоторых из полей. Мне нужно, чтобы функция меняла цвет divs, когда состояние проверки автоматически изменяется, выбирая другой пункт из выпадающего меню