div изменение цвета jquery по нажатию кнопки - PullRequest
Новая
       12

div изменение цвета jquery по нажатию кнопки

0 голосов
/ 19 ноября 2018

Полная кнопка есть. У меня есть несколько кнопок Toggle, которые размещены в таблице. Эта кнопка переключения не может иметь значения, значения Да / Нет или значения NA. Когда нажата полная кнопка, я хочу изменить цвет кнопки переключения или, по крайней мере, 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>

1 Ответ

0 голосов
/ 19 ноября 2018

Одним из самых простых решений является использование 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>
...