Установка отображаемого текста элемента <input>в "затемненный" - PullRequest
Новая
       8

Установка отображаемого текста элемента <input>в "затемненный"

2 голосов
/ 20 августа 2009

С учетом этого HTML - как я могу расширить свой jQuery, чтобы текст, отображаемый элементами <input>, отображался «затемненным» или серым при выборе радиокнопки «Не ограничивать»?

Смотрите образец здесь: http://jquery.bluenose.ch/jquerydemo.html

<script type="text/javascript">
$(document).ready(function() {
  $("#rbnDontLimit").click(function() {
    $('.dcDetails').attr('checked', false).attr('disabled', true);
  });
});
</script>

<body class="contentBody">
  <input id="rbnDontLimit" type="radio" name="limitChoice">Do not Limit</input>

  <input id="months12" class="dcDetails" type="checkbox" name="choiceMonths">12 months</input>
</body>

Прямо сейчас, нажатие на кнопку «Не ограничивать» правильно отключит этот флажок (спасибо, gw, за всю вашу помощь по этому вопросу!), Но текст по-прежнему выглядит так же, как и раньше.

Есть ли еще один хитрый jQuery / CSS-трюк, чтобы сделать этот текст тусклым?

Марк

Ответы [ 3 ]

4 голосов
/ 20 августа 2009 
<script type="text/javascript">
$(document).ready(function() {
    $("#rbnDontLimit").click(function() {
        $('.dcDetails').attr('checked', false).attr('disabled', true).each(function(){
            $('label[for=' + $(this).attr('id')  + ']').css('color', 'gray');
        });
    });
});
</script>

Измените gray на любой тусклый цвет, который вам нужен.

Или вы можете пойти чище: 

<script type="text/javascript">
$(document).ready(function() {
    $("#rbnDontLimit").click(function() {
        $('.dcDetails').attr('checked', false).attr('disabled', true).each(function(){
            $('label[for=' + $(this).attr('id')  + ']').addClass('disabled');
        });
    });
});
</script>

И добавьте определение CSS: 

.disabled { color: gray; }
2 голосов
/ 20 августа 2009

Просто переключайте класс, когда вы нажимаете радио - один класс устанавливает цвет # 333333, а другой - # CCCCCC

1 голос
/ 20 августа 2009

Если вы используете элементы управления ASP.NET, убедитесь, что вы используете свойство ClientID элементов управления кнопки при написании JavaScript. Это избавит вас от необходимости иметь дело с искаженными идентификаторами в заполнителях контента.

Пример разметки ASP.NET в ContentPlaceHolder: 

<asp:RadioButton ID="rbnDontLimit" runat="server" />
<asp:CheckBox ID="chkWhatever" CssClass="dcDetails" runat="server" />
<asp:Label ID="lblWhatever" AssociatedControlID="chkWhatever">12 months</asp:Label>

Сгенерированный HTML: 

<input id="ctl00_MainContent_rbnDontLimit" type="radio" name="ctl00$MainContent$rbnDontLimit" value="ctl00_MainContent_rbnDontLimit" />
<span class="dcDetails"><input id="ctl00_MainContent_chkWhatever" type="checkbox" name="ctl00$MainContent$chkWhatever" /></span>
<label for="ctl00_MainContent_chkWhatever" id="ctl00_MainContent_lblWhatever">12 months</label>

А для вашего JavaScript на странице: 

$("#<%= rbnDontLimit.ClientID %>").click(function() {
    $('.dcDetails').attr('checked', false).attr('disabled', true).each(function(){
            $('label[for=' + $(this).attr('id')  + ']').addClass('disabled');
    });
});
// Using <%= rbnDontLimit.ClientID %> on your .aspx page will generate:
// "ctl00_MainContent_rbnDontLimit"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...