ansaurus

Question

Setting a <input> element's display text to "dimmed"

Answer 1

+4 A:

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

Change gray to whatever dimmed-ish color you'd like.

Or you can go cleaner:

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

And add the CSS definition:

.disabled { color: gray; }

Josh Leitzel 2009-08-20 18:49:05

Hmmm.... that doesn't seem to be doing anything at all :-( I even tried setting it to "red" just to be absolutely sure! :-) No change....

marc_s 2009-08-20 18:50:56

Same with the "addClass" call - the text doesn't change appearance at all :-(

marc_s 2009-08-20 18:56:11

Sorry, I didn't read your HTML fully. Adding a color attribute to a checkbox itself is pointless. You need to wrap the "12 months" text in a <label>. Like this: <label for="months12">12 months</label>. (Also, it should be <input />, not <input></input>)I've updated the code in my answer. Should work fine if you apply a <label> to the text as I explained.

Josh Leitzel 2009-08-20 19:00:34

Yes, thanks - now it works! I just hope I can get my ASP.NET page to render something along those lines!! ;-)

marc_s 2009-08-20 19:08:10

Glad to help. Good luck with the rest of your project!

Josh Leitzel 2009-08-20 19:15:41

addClass('disabled') is the way to go

cherouvim 2009-08-20 19:18:52

Answer 2

+2 A:

Just toggle a class when you click the radio - one class sets the color to #333333 and the other to #CCCCCC

Jonathan Sampson 2009-08-20 18:49:16

Answer 3

+1 A:

If you're using ASP.NET controls, make sure you use the ClientID property of the button controls when writing your JavaScript. This will save you from having to deal with the mangled IDs within content placeholders.

Example ASP.NET markup in a 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>

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

And for your JavaScript on the page:

$("#<%= 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"

John Rasch 2009-08-20 19:00:18

Yes, thanks, I plan to use that technique!

marc_s 2009-08-20 20:54:18

ansaurus

tags:

views:

answers:

Setting a <input> element's display text to "dimmed"

related questions