@ Html.CheckBoxFor（） - 更改複選框標籤顏色

Question

我已經動態創建了複選框。

<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 /剃刀：

<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背景顏色上述代碼當你點擊複選框時。但我還需要的是：

在加載時或者當下拉菜單中的選項更改時，某些框的檢查狀態會發生變化。我需要的功能改變的div的顏色，當檢查狀態會自動從下拉菜單中選擇另一個項目下拉菜單

Answer 1

改變根據我們長時間的討論，在這裏方案如下：
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代碼

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

WORKING DEMO

Answer 2

頁面加載

$(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"); 
    } 

    }); 

}); 

Answer 3

請考慮以下幾點：

這應該對大多數HTML工作，包括你的MVC3/4/5的發電HTML通過助手:)

$('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/