使用ASP.NET WebForms的jQuery - 禁用文本框

Another jQuery noob question - what am I doing wrong??

另一个jQuery noob问题 - 我做错了什么?

I have some HTML markup rendered by ASP.NET 3.5 webforms which looks like this:

我有一些由ASP.NET 3.5 webforms呈现的HTML标记,如下所示:

<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;" />

• I have a checked "chkRC" which I want to trap and use to enable/disable other UI controls

我有一个检查“chkRC”,我想陷阱并使用它来启用/禁用其他UI控件

• I have a number of labels, input (type=radio) and input (type=text) UI controls. These are all marked with the "rcPromo" dummy CSS class

我有许多标签,输入(type = radio)和输入(type = text)UI控件。这些都标有“rcPromo”虚拟CSS类

• I have a CSS class called "textbox" for the normal textbox and "textboxDisabled" for the disabled state of the textbox, in an externally referenced CSS file, that work OK (when used in server-side code, that is)

我有一个名为“textbox”的CSS类用于普通文本框,“textboxDisabled”用于文本框的禁用状态,在外部引用的CSS文件中,可以正常工作(在服务器端代码中使用时)

What I'm trying to accomplish in jQuery is this: when the "chkRC" checkbox is disabled, I want to disable all relevant UI controls.

我想在jQuery中完成的是:当禁用“chkRC”复选框时,我想禁用所有相关的UI控件。

My jQuery looks like this:

我的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);
            }
        });
    });

It works fine for the labels and the radiobuttons - but I just can't get it to work with the textboxes - they just stay the same all around, nothing changes (they don't get disabled and they don't change their appearance to indicate that they're disabled, either).

它适用于标签和radiobuttons - 但我不能让它与文本框一起工作 - 它们只是保持相同,没有任何变化(它们没有被禁用,它们不会改变它们的外观表明他们也被禁用了。

I don't understand this - I do see several (a few more than in the sample) textboxes, which are <input type="text"> in HTML, and they do have the class="rcPromo" and class="textbox" on them - so why doesn't jQuery find and update those?

我不明白这一点 - 我确实看到几个(比示例中的更多)文本框,它们是HTML中的,它们确实有class =“rcPromo”和class =“textbox “关于他们 - 那么为什么jQuery不能找到并更新那些?

Any ideas?

Marc

2 个解决方案

#1

I can't think of a way to augment the css class names that are assigned to controls from the skin file (phoenix is correct, the class names need to be added in the same attribute).

我想不出一种方法可以增加从皮肤文件中赋予控件的css类名称(凤凰是正确的,类名需要添加到同一属性中)。

I can think of a few workarounds though:

我可以想到一些解决方法:

--> You can wrap all the textboxes you want disabled in a div with a given class:

- >您可以在给定类的div中包含要禁用的所有文本框:

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

and then disable them by selecting:

然后选择以下命令禁用它们:

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

--> You can include character strings in the ID of the textboxes you want disabled:

- >您可以在要禁用的文本框的ID中包含字符串:

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

and then disable them like so:

然后像这样禁用它们:

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

--> You can add a custom attribute to your textbox:

- >您可以在文本框中添加自定义属性:

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

and then disable them like so:

然后像这样禁用它们:

$("input[disableme='true']").attr('disabled', true);

#2

Your HTML markup is not the correct one.

您的HTML标记不正确。

You can't add two classes like the one in your code.

您不能添加两个类,如代码中的类。

Two classes can be added like this

可以像这样添加两个类

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

and not like

而不是喜欢

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

Why don't you use hasClass to check whether the element has this class set or not?

为什么不使用hasClass来检查元素是否设置了这个类?

I think you have to give this in an OR condition for the two classes.

我认为你必须在两个类的OR条件下给它。