jQuery with ASP.NET WebForms - disabling textboxes

Question

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

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

<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
• 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
• 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)

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

My jQuery looks like this:

    $(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).

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?

Any ideas?

Marc

Answer 1

Your HTML markup is not the correct one.

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?

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

Answer 2

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).

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 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:

<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);