SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict TegSkywalker's Avatar
    Join Date
    Nov 2001
    Location
    USA
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with radio un disabling checkboxes with jQuery

    I've looked at example codes but for some reason this isn't working. First of all I have a radio button that I assigned a class to it. I am assigning a class because there may be more than one. In addition, there are radio checkboxes that are disabled by default but only clickable once I click that radio button. The initial disabling works in jQuery but making them enabled isnt working.

    Here is the Javascript code in my header:

    Code:
    <script type="text/javascript">
    
    $(function() {
    
      $('.smatch').attr('disabled', 'disabled');
    
    });
    
      $('.dradio').click(function(){
                                                  
      $('.smatch').removeAttr('disabled');
    
    });
    
    </script>
    Now here is the HTML
    Code:
    <input type="radio" name="assign" class="dradio" value="1"> Value 1<br><br>
    
    <li style="margin-left:25px; margin-top:10px;"><input type="checkbox" class="smatch" name="smatch[]" value="Mon"></li>
    <li style="margin-left:25px; margin-top:10px;"><input  type="checkbox" class="smatch" name="smatch[]" value="Tue"></li>

  2. #2
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @TegSkywalker - i think you answered your own question

    The initial disabling works in jQuery but making them enabled isnt working.
    The initial disabling is in a DOM-ready function, i.e.:

    Code:
    $(function() {
        // ...do stuff when the page is ready
    })
    but the enabling as the result of the click event isn't, because it's outside the DOM-ready function. that means that jQuery is trying to attach the event handlers immediately, and the DOM isn't ready yet (so the code has no effect). try this instead (moving both the initial disabling and the click handler inside the DOM-ready function):

    Code:
    <script type="text/javascript">
    
    $(function() {
    
      $('.smatch').attr('disabled', 'disabled');
    
      $('.dradio').click(function(){
                                                  
        $('.smatch').removeAttr('disabled');
    
      });
    
    });
    
    </script>
    hope that helps


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •