Изменить цвет фона элемента списка, выбранного в списке флажков - PullRequest
Новая
       17

Изменить цвет фона элемента списка, выбранного в списке флажков

1 голос
/ 20 июня 2011

Я использую флажок на своей веб-странице следующим образом: 

<asp:CheckBoxList ID="chklstTelpas" runat="server" RepeatDirection="Horizontal" 
                  AutoPostBack="True" Width="594px"
                  OnSelectedIndexChanged="chklstTelpas_SelectedIndexChanged">
    <asp:ListItem Text="TELPAS Speaking" Value="1"></asp:ListItem>
    <asp:ListItem Text="TELPAS Listening" Value="2"></asp:ListItem>
    <asp:ListItem Text="TELPAS Reading" Value="3"></asp:ListItem>
    <asp:ListItem Text="TELPAS Writing" Value="4"></asp:ListItem>
</asp:CheckBoxList>

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

Ответы [ 5 ]

6 голосов
/ 20 июня 2011

Вы можете сделать что-то вроде этого 

        for (int i = 0; i < chklstTelpas.Items.Count; i++)
        {
            if (chklstTelpas.Items[i].Selected)
            {
                chklstTelpas.Items[i].Attributes.Add("style", "background-color: red;");
            }
            else
            {
                chklstTelpas.Items[i].Attributes.Add("style", "background-color: white;");
            }
        }

Это позволит вам раскрасить несколько вариантов. Если вы используете SelectedIndex, он даст вам только самый низкий индекс.

3 голосов
/ 20 июня 2011 
 protected void chklstTelpas_SelectedIndexChanged(object sender, EventArgs e)
    {
        Control chk = ((Control)sender).FindControl("chk");
        CheckBoxList ch=(CheckBoxList) chk;
        if (ch.Items[ch.SelectedIndex].Selected)
            ch.Items[ch.SelectedIndex].Attributes.Add("Style", "background-color: red;");

    }

Надеюсь, это поможет !!!

1 голос
/ 20 июня 2011 
<asp:CheckBoxList ID="chklstTelpas" runat="server" RepeatDirection="Horizontal" 
              AutoPostBack="True" Width="594px" 
               OnSelectedIndexChanged="chklstTelpas_SelectedIndexChanged" CssClass="multiplus">
<asp:ListItem Text="TELPAS Speaking" Value="1"></asp:ListItem>
<asp:ListItem Text="TELPAS Listening" Value="2"></asp:ListItem>
<asp:ListItem Text="TELPAS Reading" Value="3"></asp:ListItem>
<asp:ListItem Text="TELPAS Writing" Value="4"></asp:ListItem>

добавить класс css в checkboxlist, затем написать код jquery как: 

var selectedBox = 0;
var lastChecked = null;
$(document).ready(function () {
    $(".multiplus input:checkbox").click(
                function () {

                        if ($(this).attr("checked")) {
                            $(lastChecked).attr("checked", false).parent().css({ "background-color": "#FFF", "font-weight": "normal" });
                            lastChecked = this;

                    }
                    if ($(this).attr("checked")) {
                        $(this).parent().css({ "background-color": "#FFC", "font-weight": "bold" });
                        selectedBox++;
                    } else {
                        $(this).parent().css({ "background-color": "#FFF", "font-weight": "normal" });
                        selectedBox--;
                    }
                }
            );
});
1 голос
/ 20 июня 2011

Я смутно помню, что это можно сделать, зацикливая элементы, а для отмеченного элемента вы устанавливаете атрибуты 

CheckBoxItem.Attributes.Add("Style", "color: red;")
1 голос
/ 20 июня 2011

Вы можете сделать на SelectedIndexChanged Событие на DropDown. 

chklstTelpas.Items[chklstTelpas.SelectedIndex].Attributes.Add("style", "background-color:blue;");
...