2016-03-21 10 views
2

Ich habe Anwendung in ASP.NET mit CheckBoxList:ändern CheckBoxList Artikel Stil

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

Ich möchte für ausgewählte Elemente nach Button-Klick-Stil ändern. Zu tun, dass ich JavaScript Funktionen erzeugt habe:

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

Wenn ich Schaltfläche klicken, ausgewählte Elemente ihre Farben für einen sehr kurzen Moment ändern (etwa 0,5 Sekunden) und dann auf dem Standard sie wieder schwarze Farbe. Warum wurde meine Checkbox-Liste zurückgesetzt? Ich will dieses Verhalten nicht. Wie kann ich meinen Code ändern, um die Farbe permanent zu ändern (nicht nur für 0,5 Sekunden)? Hier

+0

Sie haben den Klassennamen dauerhaft geändert, prüfen, ob Sie möglicherweise ein Postback haben oder Ihre Checkbox-Elemente möglicherweise wieder erstellt haben – Adil

Antwort

1

ist Komplettlösung:

<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" /> 

Ich habe lokalisierte myCheckBoxList jQuery verwenden, weil es anders Id im Browser haben können, wenn Sie Master-Seite verwenden. Zweitens gebe ich false von der Funktion zurück, um Postback beim Klicken auf die Schaltfläche zu verhindern, um den Klassenwert beizubehalten.

+0

Vielen Dank. Es funktioniert perfekt. Ich mache wahrscheinlich ungewollt Postback. Natürlich sollte es Optionen geben [i] .parentElement.style.color = 'Red' - mein Fehler –