telerik:RadToggleButton单击按钮时颜色发生变化

Question

我有一些(大约20个(切换按钮。还会有一个提交按钮。我的想法是在单击提交按钮时查看切换按钮的值，然后更改切换按钮的颜色。

$(document).ready(function($) {
$("btnComplete").click(function() {
if ($('#btnToggleIntro1').val().trim().length < 1) {
$('#btnToggleIntro1').css('background-color', '#A497E5');
} else {
$('#btnToggleIntro1').css('background-color', '#ffffff');
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<telerik:RadToggleButton ID="btnToggleIntro1" runat="server" AutoPostBack="False" Font-Size="14px" meta:resourcekey="btnToggle3Resource1">
<ToggleStates>
<telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource19" />
<telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource20" />
<telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource21" />
<telerik:ButtonToggleState Text="N/A" />
</ToggleStates>
</telerik:RadToggleButton>
<telerik:RadButton ID="btnComplete" runat="server" RenderMode="Auto" Skin="BlackMetroTouch" Text="Complete" OnClick="btnComplete_Click"></telerik:RadButton>

这并没有发生。也没有控制台错误。

我尝试的另一个选项是基于类名

$(document).ready(function($) {
$("btnComplete").click(function() {
$('.RecomenderButton').each(function(i, obj) {
var dest = $(this);
dest.val(dest.val().split(" ").join(""));
if (dest.val.length < 1) {
$(this).css('background-color', '#A497E5');
} else {
$(this).css('background-color', '#ffffff');
}
});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<telerik:RadToggleButton ID="btnRecommenderPayg2Check" runat="server" AutoPostBack="False" Font-Size="14px" Class="RecomenderButton">
<ToggleStates>
<telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource22" />
<telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource23" />
<telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource24" />
<telerik:ButtonToggleState Text="N/A" />
</ToggleStates>
</telerik:RadToggleButton>
<telerik:RadToggleButton ID="btnRecommenderPayg3Check" runat="server" AutoPostBack="False" Font-Size="14px" Class="RecomenderButton">
<ToggleStates>
<telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource22" />
<telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource23" />
<telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource24" />
<telerik:ButtonToggleState Text="N/A" />
</ToggleStates>
</telerik:RadToggleButton>
<telerik:RadButton ID="btnComplete" runat="server" RenderMode="Auto" Skin="BlackMetroTouch" Text="Complete" OnClick="btnComplete_Click"></telerik:RadButton>

即使是这种方法也无济于事。有人能指出哪里出了问题吗

Answer 1

最简单的解决方案之一是使用css并点击切换按钮，更改颜色

<style type="text/css">.Checked {
background-color: white !important;
}
.notChecked {
background-color: indianred !important;
}
</style>
<div id="divIntro">
<telerik:RadToggleButton ID="btnToggleIntro1" runat="server" AutoPostBack="False" Font-Size="14px">
<ToggleStates>
<telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource1" CssClass="notChecked" />
<telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource2" CssClass="Checked" />
<telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource3" CssClass="Checked" />
<telerik:ButtonToggleState Text="N/A" CssClass="Checked" />
</ToggleStates>
</telerik:RadToggleButton>
</div>