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

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