Question

我有一些（大约20个）Togglebutton。也将有一个提交按钮。我的想法是在单击“提交”按钮时查看切换按钮的值，然后更改切换按钮的颜色。

$(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>

telerik：RadToggleButton按钮单击时颜色改变

1 个答案: