Telerik：RadToggleButton 按钮单击时颜色变化答案

【问题标题】：telerik:RadToggleButton color change on button clickTelerik：RadToggleButton 按钮单击时颜色变化
【发布时间】：2018-11-16 02:27:22
【问题描述】：

我有一些（大约 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>

即使这种方法也无济于事。有人能指点一下，哪里出错了

【问题讨论】：

标签： javascript jquery telerik

【解决方案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>

【讨论】：