jQuery с ASP.NET WebForms - отключение текстовых полей - PullRequest
Новая
       37

jQuery с ASP.NET WebForms - отключение текстовых полей

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

Еще один вопрос jQuery noob - что я делаю не так?

У меня есть некоторая HTML-разметка, представленная веб-формами ASP.NET 3.5, которая выглядит следующим образом: 

<input id="ctl01_cphContent_pnlBasicInfo_chkRC" 
       type="checkbox" name="ctl01$cphContent$pnlBasicInfo$chkRC" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_chkRC">Recurrent Charges</label>

<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblPromoValidFor" 
      class="rcPromo">Validity:</span>

<span class="rcPromo">
   <input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidFor" 
          type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor" 
          value="rbnDiscountValidFor" checked="checked" />
   <label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidFor">valid for</label>
</span>
<span class="rcPromo">
   <input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidUntil" 
          type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor" 
          value="rbnDiscountValidUntil" />
   <label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidUntil">valid until</label>
</span>

<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountMonths" type="text"
       id="ctl01_cphContent_pnlBasicInfo_txtDiscountMonths" 
       class="textbox" class="rcPromo" originalValue="" style="width:30px;" />
<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblMonths" class="rcPromo"></span>

<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountUntil" type="text" 
       id="ctl01_cphContent_pnlBasicInfo_txtDiscountUntil" 
       class="textbox" class="rcPromo" originalValue="" style="width:150px;" />
  • У меня установлен флажок "chkRC", который я хочу перехватить и использовать для включения / отключения других элементов управления пользовательского интерфейса
  • У меня есть несколько меток, элементы управления вводом (type = radio) и input (type = text). Все они помечены фиктивным CSS-классом "rcPromo"
  • У меня есть класс CSS с именем «textbox» для обычного текстового поля и «textboxDisabled» для отключенного состояния текстового поля в файле CSS с внешней ссылкой, который работает нормально (при использовании в коде на стороне сервера, то есть)

В jQuery я пытаюсь выполнить следующее: когда флажок «chkRC» отключен, я хочу отключить все соответствующие элементы управления пользовательским интерфейсом.

Мой jQuery выглядит так: 

    $(document).ready(function() {
        $("#<%= chkRC.ClientID %>").click(function() {
            $('.rcPromo > :label').toggleClass('dimmed');

            if (this.checked) {
                $('.rcPromo').removeAttr('disabled');
                $('.rcPromo .textboxDisabled').addClass('textbox').removeClass('textboxDisabled');
            }
            else {
                $('.rcPromo > :input').removeAttr('checked');
                $('.rcPromo .textbox').addClass('textboxDisabled').removeClass('textbox');
                $('.rcPromo').attr('disabled', true);
            }
        });
    });

Он отлично работает для меток и радиокнопок - но я просто не могу заставить его работать с текстовыми полями - они просто остаются неизменными, ничего не меняется (они не отключаются и не меняются) их появление также указывает на то, что они инвалиды).

Я не понимаю этого - я вижу несколько (на несколько больше, чем в примере) текстовых полей, которые <input type="text"> в HTML, и на них есть class="rcPromo" и class="textbox" - так почему jQuery не находит и не обновляет их?

Есть идеи?

Марк

Ответы [ 2 ]

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

Я не могу придумать способ увеличить имена классов css, которые назначены для элементов управления из файла скина (Phoenix верен, имена классов должны быть добавлены в одном атрибуте).

Хотя я могу придумать несколько обходных путей:

-> Вы можете обернуть все текстовые поля, которые хотите отключить, в div с указанным классом: 

<div class="disable_textbox"><asp:textbox id="".../></div>

, а затем отключите их, выбрав: 

$('.disable_textbox input').attr('disabled', true);

-> Вы можете включить символьные строки в идентификатор текстовых полей, которые вы хотите отключить: 

<asp:textbox id="txtDiscountUntil_DisableMe" ... />

и затем отключите их следующим образом: 

$("input[id*='DisableMe']").attr('disabled', true);

-> Вы можете добавить пользовательский атрибут в текстовое поле: 

txtDiscountUntil.Attributes.Add("disableme", "true");

и затем отключите их следующим образом: 

$("input[disableme='true']").attr('disabled', true);
1 голос
/ 21 августа 2009

Ваша HTML-разметка неверна.

Вы не можете добавить два класса, как в вашем коде.

Можно добавить два класса, например: 

<input type="text" class="Class1 Class2" />

а не как 

<input type="text" class="Class1" class="Class2" />

Почему бы вам не использовать hasClass , чтобы проверить, установлен ли элемент для этого класса или нет?

Я думаю, вы должны указать это в условии ИЛИ для двух классов.

...