変更CheckBoxListの項目のスタイル

Question

私は、CheckBoxListのとASP.NETでのアプリケーションを持っている：

<asp:CheckBoxList runat="server" ID="myCheckBoxList"> 
    <asp:ListItem Text="1 16" /> 
    <asp:ListItem Text="1 17" /> 
    <asp:ListItem Text="2 20" /> 
</asp:CheckBoxList> 

私はボタンをクリックした後、選択された要素のスタイルを変更したいです。私はJavaScriptののfuctionを持っていることを行うために：私はボタンをクリックすると

function changeColor() { 
    var checkBoxList = document.getElementById("myCheckBoxList"); 
    var options = checkBoxList.getElementsByTagName('input'); 

    for (var i = 0; i < options.length; i++) { 
     console.log(options[i].checked); 
     if (options[i].checked) { 
      options[i].parentElement.className = 'Red'; 
     } 
    } 
} 

、選択した項目は、非常に短い瞬間のために自分の色を変更する（約0.5秒）、その後、戻って、彼らは黒い色をデフォルトに。なぜ私のチェックボックスリストアイテムスタイルのリセット？私はこの振る舞いを望まない。どうすれば色を永久に（0.5秒だけでなく）変更するようにコードを変更できますか？ここで

Answer 1

は完全なソリューションです：

<script type="text/javascript"> 
    function changeColor() { 
     var checkBoxList = $('[id$="myCheckBoxList"]'); 
     var options = checkBoxList[0].getElementsByTagName('input'); 

     for (var i = 0; i < options.length; i++) { 
      console.log(options[i].checked); 
      if (options[i].checked) { 
       options[i].parentElement.className = 'Red'; 
      } 
     } 

     return false; 
    } 
</script> 

<asp:CheckBoxList runat="server" ID="myCheckBoxList"> 
    <asp:ListItem Text="1 16" /> 
    <asp:ListItem Text="1 17" /> 
    <asp:ListItem Text="2 20" /> 
</asp:CheckBoxList> 

<asp:Button OnClientClick="return changeColor();" Text="Test" runat="server" /> 

マスターページを使用している場合、それはブラウザで異なるIDを持つことができるので、私は、jQueryのを使用してmyCheckBoxListをローカライズしました。次に、クラスの値を維持するために、ボタンのクリック時のポストバックを防ぐために関数からfalseを返します。