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>

Даже этот метод не поможет.Может кто-то plesae указывает, где идет не так

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>