title: jQuery with ASP.NET WebForms for a poor old server dev
body: <p>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 :-)</p>
  
  <p>I decided to try to use jQuery to handle some client-side enabling and disabling of UI elements.</p>
  
  <p>I have two radio buttons (<code>rbnDoLimit</code> and <code>rbnDontLimit</code>), and three checkboxes (<code>months12</code>, <code>months24</code>, <code>months36</code>) - if I click on <code>rbnDoLimit</code>, I'd like to enable all three of them, if I click on <code>rbnDontLimit</code>, I like to clear and disable the three checkboxes. Seems simple enough, right?</p>
  
  <p>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.</p>
  
  <p>My two radio buttons get rendered out in the page as:</p>
  
  <pre><code>&lt;input id="ctl01_cphContent_pnlBasicInfo_rbnDontLimit" 
         type="radio" name="ctl01$cphContent$pnlBasicInfo$LimitMVD" 
         value="False" checked="checked" /&gt;
  &lt;input id="ctl01_cphContent_pnlBasicInfo_rbnDoLimit" 
         type="radio" name="ctl01$cphContent$pnlBasicInfo$LimitMVD" 
         value="True" /&gt;
  </code></pre>
  
  <p>and my three checkboxes as:</p>
  
  <pre><code>&lt;span class="dcDetails"&gt;&lt;input id="ctl01_cphContent_pnlBasicInfo_months12" 
        type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months12" /&gt;&lt;/span&gt;
  &lt;span class="dcDetails"&gt;&lt;input id="ctl01_cphContent_pnlBasicInfo_months24" 
        type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months24" /&gt;&lt;/span&gt;
  &lt;span class="dcDetails"&gt;&lt;input id="ctl01_cphContent_pnlBasicInfo_months36" 
        type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months36" /&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I adorned them with a CSS class of <code>dcDetails</code> (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 <code>&lt;input&gt;</code> elements as expected, but onto a <code>&lt;span&gt;</code> element around the <code>&lt;input&gt;</code>...... (the first mystery to me.....). Anyway.....</p>
  
  <p>My first jQuery attempt looks like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(
          $("#&lt;%= rbnDontLimit.ClientID %&gt;").click(function() {
              $(".dcDetails").attr('disabled','false'); 
          },
          $("#&lt;%= rbnDoLimit.ClientID %&gt;").click(function() {
              $(".dcDetails").attr('disabled','true'); 
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>No luck - I can click on the two radio buttons all I want - nothing happens. I assume this is because the <code>dcDetails</code> CSS class is on the <code>&lt;span&gt;</code> around the checkboxes, right?</p>
  
  <p>OK - so it get a bit messier, but this ought to work!! Now I'm selecting the three checkboxes specifically, by their <code>ClientID</code> - this ought to be exact and get the right elements, I thought:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(
          $("#&lt;%= rbnDontLimit.ClientID %&gt;").click(function() {
              $("#&lt;%= months12.ClientID %&gt;").attr('disabled','false'); 
              $("#&lt;%= months24.ClientID %&gt;").attr('disabled','false'); 
              $("#&lt;%= months36.ClientID %&gt;").attr('disabled','false'); 
          },
          $("#&lt;%= rbnDoLimit.ClientID %&gt;").click(function() {
              $("#&lt;%= months12.ClientID %&gt;").attr('disabled','true'); 
              $("#&lt;%= months24.ClientID %&gt;").attr('disabled','true'); 
              $("#&lt;%= months36.ClientID %&gt;").attr('disabled','true'); 
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>Again, no luck......</p>
  
  <p>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! :-)</p>
  
  <p>Marc</p>
  
  <p><strong>UPDATE:</strong><br>
  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:</p>
  
  <p>Webpage error details</p>
  
  <p>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</p>
  
  <p>Almost seems to be an error deep inside jQuery....... any ideas? </p>
  
  <p><strong>UPDATE 2:</strong><br>
  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 <strong>neither</strong> telling me which object it refers to, <strong>nor</strong> telling me what property or method is not supported........</p>
  
  <p>Or am I doing something wrong trying to hook up two click event handler functions in the document.ready() ?? </p>
  
  <p>The scaled down, HTML only version is available at <a href="http://jquery.bluenose.ch/jquerydemo.html" rel="nofollow noreferrer">http://jquery.bluenose.ch/jquerydemo.html</a> 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 :-(</p>