jQuery with ASP.NET WebForms for a poor old server dev....

Question

OK, being a server developer, this Javascript voodoo on the ASP.NET page (based on a master page) rendered on the client is a bit too much for me, it seems :-)

I decided to try to use jQuery to handle some client-side enabling and disabling of UI elements.

I have two radio buttons (rbnDoLimit and rbnDontLimit), and three checkboxes (months12, months24, months36) - if I click on rbnDoLimit, I'd like to enable all three of them, if I click on rbnDontLimit, I like to clear and disable the three checkboxes. Seems simple enough, right?

So I downloaded and included jQuery 1.3.2 in my ASP.NET 3.5 webform - works OK, I can display an "alert" on the $(document).ready event.

My two radio buttons get rendered out in the page as:

<input id="ctl01_cphContent_pnlBasicInfo_rbnDontLimit" 
       type="radio" name="ctl01$cphContent$pnlBasicInfo$LimitMVD" 
       value="False" checked="checked" />
<input id="ctl01_cphContent_pnlBasicInfo_rbnDoLimit" 
       type="radio" name="ctl01$cphContent$pnlBasicInfo$LimitMVD" 
       value="True" />

and my three checkboxes as:

<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months12" 
      type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months12" /></span>
<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months24" 
      type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months24" /></span>
<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months36" 
      type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months36" /></span>

I adorned them with a CSS class of dcDetails (which doesn't exist - but is intended to be used for selecting them in jQuery). The first thing I noticed is that the CSS class wasn't applied to my <input> elements as expected, but onto a <span> element around the <input>...... (the first mystery to me.....). Anyway.....

My first jQuery attempt looks like this:

<script type="text/javascript">
    $(document).ready(
        $("#<%= rbnDontLimit.ClientID %>").click(function() {
            $(".dcDetails").attr('disabled','false'); 
        },
        $("#<%= rbnDoLimit.ClientID %>").click(function() {
            $(".dcDetails").attr('disabled','true'); 
        });
</script>

No luck - I can click on the two radio buttons all I want - nothing happens. I assume this is because the dcDetails CSS class is on the <span> around the checkboxes, right?

OK - so it get a bit messier, but this ought to work!! Now I'm selecting the three checkboxes specifically, by their ClientID - this ought to be exact and get the right elements, I thought:

<script type="text/javascript">
    $(document).ready(
        $("#<%= rbnDontLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").attr('disabled','false'); 
            $("#<%= months24.ClientID %>").attr('disabled','false'); 
            $("#<%= months36.ClientID %>").attr('disabled','false'); 
        },
        $("#<%= rbnDoLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").attr('disabled','true'); 
            $("#<%= months24.ClientID %>").attr('disabled','true'); 
            $("#<%= months36.ClientID %>").attr('disabled','true'); 
        });
</script>

Again, no luck......

So what the heck am I missing?? All these great snazzy demos can't seem to help me understand why this isn't working - not even a bit.... I guess I'm missing something very basic, very fundamentals - but I just can't seem to figure out, what that is! :-)

Marc

UPDATE:
haven't had much luck yet :-( I stripped down my sample to a barebones HTML page - but I keep having this error over and over and over again, no matter which of the various tips I try:

Webpage error details

Message: Object doesn't support this property or method Line: 3032 Char: 6 Code: 0 URI: file:///D:/projects/JQuery1/jquery-1.3.2.js

Almost seems to be an error deep inside jQuery....... any ideas?

UPDATE 2:
I'm beginning to think I'm doing something fundamentally wrong here.... I assumed that in the document.ready() function, I could hook up the click events on the two radio buttons. Am I missing something here? Would I need to create a function that I call from the radio button's client "on click" event instead? Whatever I'm trying to do, even in my HTML editor (TopStyle 4) - this error "object doesn't support this property or method" keeps popping up all the time - conveniently neither telling me which object it refers to, nor telling me what property or method is not supported........

Or am I doing something wrong trying to hook up two click event handler functions in the document.ready() ??

The scaled down, HTML only version is available at http://jquery.bluenose.ch/jquerydemo.html for anyone who might be interested - I expected to be able to click on the "Do Limit" radio button and have it disable the three checkboxes below it - no go :-(

Answer 1

Try changing:

$("#<%= months12.ClientID %>").attr('disabled','false')

to:

$("#<%= months12.ClientID %>").attr('disabled','disabled')

and

$("#<%= months12.ClientID %>").attr('disabled','true')

to:

$("#<%= months12.ClientID %>").attr('disabled','')

Answer 2

Use Kieron's answer and then...

$("#<%= rbnDontLimit.ClientID %>").click(function() {
            $(".dcDetails").attr('disabled','false'); 
}

could also be changed to:

$("#<%= rbnDontLimit.ClientID %>").click(function() {
            $(".dcDetails > :checkbox").attr('disabled','disabled'); 
}

Answer 3

To disable a checkbox(any control), I use the following

$("#chkSomething").attr("disabled", "true")

To enable a checkbox(any control), I use the following

$("#chkSomething").removeAttr("disabled")

To answer your question,

<script type="text/javascript">
    $(document).ready(
        $("#<%= rbnDontLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").removeAttr("disabled"); 
            $("#<%= months24.ClientID %>").removeAttr("disabled"); 
            $("#<%= months36.ClientID %>").removeAttr("disabled"); 
        },
        $("#<%= rbnDoLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").attr('disabled','true'); 
            $("#<%= months24.ClientID %>").attr('disabled','true'); 
            $("#<%= months36.ClientID %>").attr('disabled','true'); 
        });
</script>

Answer 4

I took a look at your example and there were some syntax issues.

Your example:

 $(document).ready(
    $('#rbnDontLimit').click(function() {
     $(".dcDetails :input").removeAttr('disabled');
    }),
    $("#rbnDoLimit").click(function() {
     $('.dcDetails :input').attr('disabled', 'true');
    }));

You were missing the "function (){" after the ready and its corresponding "}" at the end. The comma between the to click events should have been a semicolon. Remove the ":input" from the jQuery selectors. This should work for you:

   $(document).ready(function() {
        $('#rbnDontLimit').click(function() {
            $(".dcDetails").removeAttr('disabled');
        });
        $("#rbnDoLimit").click(function() {
            $('.dcDetails').attr('disabled', true);
        });
    });