Question

有一个完整的按钮。我有一些切换按钮放在桌子上。此切换按钮可以没有值，是/否或不适用值。单击完成按钮后，我想更改切换按钮的颜色或至少div。我有以下代码。当我在开发人员控制台中签入并运行命令时，它是在更改div的颜色，但在运行时不会更改（不是从控制台更新）。

$(document).ready(function() {

  $(document).on('click', '#btnComplete', function() {

    if ($('#btnToggleIntro1').val().trim().length < 1) {
      $('#divIntro').attr('style', 'background-color: blue');
      //css('background-color', 'blue');
      //  $('#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>
<div id="divIntro">
  <telerik:RadToggleButton ID="btnToggleIntro1" runat="server" AutoPostBack="False" Font-Size="14px" meta:resourcekey="btnToggle11Resource1" class="RecomenderButton" ClientIDMode="Static">
    <ToggleStates>
      <telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource1" />
      <telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource2" />
      <telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource3" />
      <telerik:ButtonToggleState Text="N/A" />

    </ToggleStates>
  </telerik:RadToggleButton>
</div>

以下是我要更改颜色的表的渲染示例

  <div id="divIntroduction">
                                <table class="table table-bordered table-hover table-striped" id="tbIntroduction">

                                    <tr>
                                        <td class="light-blue-background text-center" colspan="4">INTRODUCTION </td>
                                    </tr>
                                    <tr class="text-left">
                                        <td class="text-center col-xs-1"></td>
                                        <td class="col-xs-5 ">Is this a Staff or instruction.
                                        </td>
                                        <td class="text-center col-xs-2" style="vertical-align: middle">
                                            <div id="divIntro">
                                                <button type="submit" name="btnToggleIntro1" value="Yes" id="btnToggleIntro1" class="RadToggleButton RadButton RadButton_Bootstrap rbButton rbRounded rbIconButton" class="RecomenderButton" style="font-size:14px;"><span class="rbText">Yes</span><input id="btnToggleIntro1_ClientState" name="btnToggleIntro1_ClientState" type="hidden" /></button>
                                            </div>

                                        </td>
                                        <td class="text-center col-xs-2" style="vertical-align: middle">
                                            <button type="submit" name="btnToggleIntroAprv" value=" " id="btnToggleIntroAprv" class="RadToggleButton RadButton RadButton_Bootstrap rbButton rbRounded rbIconButton" style="font-size:14px;"><span class="rbText"> </span><input id="btnToggleIntroAprv_ClientState" name="btnToggleIntroAprv_ClientState" type="hidden" /></button>
                                        </td>
                                    </tr>
                                </table>
                            </div>

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>

div颜色更改jquery在按钮上单击

1 个答案: