telerik:RadToggleButton 颜色变化基于选定的值答案

【问题标题】：telerik:RadToggleButton colour change based on selected valuetelerik:RadToggleButton 颜色变化基于选定的值
【发布时间】：2018-08-21 00:52:02
【问题描述】：

我有多个 telerik:RadToggleButton 。这可以采用名为“”、“是”、“不适用”、“否”的四种状态。我正在尝试找到一个通用代码来根据按钮上的文本更改按钮颜色

下面是我的aspx代码

 <telerik:RadToggleButton ID="btnToggleB1ops" runat="server" AutoPostBack="False" Font-Size="14px">
                <ToggleStates>
                    <telerik:ButtonToggleState Text=" " />
                    <telerik:ButtonToggleState Text="Yes" />
                    <telerik:ButtonToggleState Text="No" />
                    <telerik:ButtonToggleState Text="N/A" />
                </ToggleStates>
            </telerik:RadToggleButton>
 <telerik:RadToggleButton ID="btnToggleA2" runat="server" AutoPostBack="False" Font-Size="14px">
                <ToggleStates>
                    <telerik:ButtonToggleState Text=" " />
                    <telerik:ButtonToggleState Text="Yes" />
                    <telerik:ButtonToggleState Text="No" />
                    <telerik:ButtonToggleState Text="N/A" />
                </ToggleStates>
            </telerik:RadToggleButton>

适用于任何切换按钮的 JavaScript 代码，绿色表示是，红色表示否，n/a 表示蓝色

【问题讨论】：

标签： javascript telerik

【解决方案1】：

您可以考虑对每个具有属性的状态使用图标更改

 PrimaryIconCssClass="yourIcon"

如documentation 所述。

另外，我会考虑一些解决方法。您可以订阅按钮上的 Click 事件，然后执行以下操作：

If (btn.Text == "Yes")
{
   btn.Background = Brushes.Green
}

等等。

【讨论】：

【解决方案2】：

使用 CSS

<style type="text/css">.Checked {
  background-color: white !important;
}

.notChecked {
  background-color: tan !important;
}

</style>

<telerik:RadToggleButton ID="btnToggleIntroAprv" runat="server" AutoPostBack="False" Font-Size="14px" meta:resourcekey="btnToggle1Resource1">
  <ToggleStates>
    <telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource4" CssClass="notChecked" />
    <telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource5" />
    <telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource6" />
    <telerik:ButtonToggleState Text="N/A" />
  </ToggleStates>
</telerik:RadToggleButton>

【讨论】：