www.webdeveloper.com
Results 1 to 4 of 4

Thread: Checkboxes to enable or disable other checkboxes...

  1. #1
    Join Date
    Apr 2011
    Location
    New Home Team - Everett, WA
    Posts
    261

    Exclamation Checkboxes to enable or disable other checkboxes...

    Ok, so I've got a form I'm trying to make and it has sections that can be checked and if that section is checked, it needs to enable the checkboxes of the sub-items within that section.

    I don't have any code to share yet because I'm still in the planning phase, but it will more or less look like this:

    • First Item
      • First Item's 1st sub-item
      • First Item's 2nd sub-item
    • Second Item
      • Second Item's 1st sub-item (*required)
      • Second Item's 2nd sub-item
      • Second Item's 3rd sub-item
    • Third Item
    • etc


    Within that list, basically if "second item" gets checked, then the sub-items of "second item" would be enabled... but the 1st sub-item would also be checked by default and remain disabled because it is required when the second item is checked.

    Does that kind of make sense? :/

    Any help is greatly appreciated!
    Thanks in advance!

  2. #2
    Join Date
    Apr 2011
    Location
    New Home Team - Everett, WA
    Posts
    261
    Ideally I would also like a structure with which I can make this process dynamic, such as one single jQuery function for which I could send the sub-item's id's or something (like in an array) and it would mark them all -- like maybe two separate arrays, and the first can be ones to enable and the second value can be ones to mark required.

    Also, if the "second item" box is unchecked, it should un-check and disable ALL sub-items for that item.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,635
    take it as a draft

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Items & boxes</title>
    <style type="text/css">
    div.item_container input[type=checkbox]{margin-right:10px;}
    input.sub_item{margin-left:30px;}
    div.sub_sp{display:none;}
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('div.item_container').each(function(){
    var cont=$(this),mbox=cont.find('input.main_item'),sbox=cont.find('input.sub_item');
    mbox.each(function(){
    $(this).click(function(){
    if($(this).is(':checked')){sbox.each(function(){$(this).parent().fadeIn('normal');if($(this).hasClass('required')){$(this).get(0).checked=true;}});}
    else{sbox.each(function(){$(this).get(0).checked=false;$(this).parent().fadeOut('normal');});}
    });
    });
    });
    });
    </script>
    </head>
    <body>
    <form name="myform" id="myform" action="">
    <div class="item_container">
    <div><input type="checkbox" class="main_item" value='chb1' />First Item</div>
    <div class="sub_sp"><input type="checkbox" class="sub_item" value='chb2' />First Item's 1st sub-item</div>
    <div class="sub_sp"><input type="checkbox" class="sub_item" value='chb3' />First Item's 2nd sub-item</div>
    </div>
    <div class="item_container">
    <div><input type="checkbox" class="main_item" value='chb4' />Second Item</div>
    <div class="sub_sp"><input type="checkbox" class="sub_item required" value='chb5' />Second Item's 1st sub-item (*required)</div>
    <div class="sub_sp"><input type="checkbox" class="sub_item" value='chb6' />Second Item's 2nd sub-item</div>
    <div class="sub_sp"><input type="checkbox" class="sub_item" value='chb7' />Second Item's 3d sub-item</div>
    </div>
    <div class="item_container">
    <div><input type="checkbox" class="main_item" value='chb8' />Third Item</div>
    <div class="sub_sp"><input type="checkbox" class="sub_item required" value='chb9' />Third Item's 1st sub-item (*required)</div>
    <div class="sub_sp"><input type="checkbox" class="sub_item" value='chb10' />Third Item's 2nd sub-item</div>
    <div class="sub_sp"><input type="checkbox" class="sub_item" value='chb11' />Third Item's 3d sub-item</div>
    <div class="sub_sp"><input type="checkbox" class="sub_item required" value='chb12' />Third Item's 4th sub-item (*required)</div>
    </div>
    </form>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,635
    you welcome
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles