JQuery with ASP.NET WebForms - disabling text fields
Another jQuery noob question - what am I doing wrong?
I have HTML markup generated with ASP.NET 3.5 Web Forms that 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 tested "chkRC" that I want to catch and use to enable / disable other UI controls.
- I have multiple labels, input (type = radio) and input (type = text) UI controls. All of them are marked with a dummy CSS class "rcPromo"
- I have a CSS class called "textbox" for a regular textbox and "textboxDisabled" for the disabled state of the textbox, in a CSS file with an external link that works fine (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 elements.
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 great for shortcuts and radiobuttons, but I just can't get it to work with textboxes - they just stay the same around, nothing changes (they are not disabled and their appearance does not change to indicate that they are disabled as well).
I do not understand - I see a few (slightly more than in the sample), text fields, which are <input type="text">
in HTML, and they have class="rcPromo"
, and class="textbox"
to them - so why not find jQuery and update them?
Any ideas?
Mark
source to share
I can't think of a way to increment the CSS class names assigned to the controls from the skin file (phoenix is correct, the class names must be added to the same attribute).
I can think of a few workarounds:
-> You can wrap all the text boxes you want to be disabled in a div with a given class:
<div class="disable_textbox"><asp:textbox id="".../></div>
and then disable them by choosing:
$('.disable_textbox input').attr('disabled', true);
-> You can include character strings in the id of the textboxes you want to disable:
<asp:textbox id="txtDiscountUntil_DisableMe" ... />
and then disable them like so:
$("input[id*='DisableMe']").attr('disabled', true);
-> You can add a custom attribute to the textbox:
txtDiscountUntil.Attributes.Add("disableme", "true");
and then disable them like so:
$("input[disableme='true']").attr('disabled', true);
source to share
Your HTML markup is incorrect.
You cannot add two classes to your code for example.
Two classes can be added here
<input type="text" class="Class1 Class2" />
and don't like
<input type="text" class="Class1" class="Class2" />
Why don't you use hasClass to check if this class has this class or not?
I think you should give this in an OR clause for two classes.
source to share