/    Sign up×
Community /Pin to ProfileBookmark

Checkboxes to enable or disable other checkboxes…

Copy linkTweet thisAlerts:
Apr 24.2013

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:

[LIST]

  • [*]

    First Item

    [LIST]

  • [*]

    First Item’s 1st sub-item


  • [*]

    First Item’s 2nd sub-item


    • [/LIST]
  • [*]

    Second Item

    [LIST]

  • [*]

    Second Item’s 1st sub-item (*required)


  • [*]

    Second Item’s 2nd sub-item


  • [*]

    Second Item’s 3rd sub-item


    • [/LIST]
  • [*]

    Third Item


  • [*]

    etc


    • [/LIST]

    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? :/

    [SIZE=5][FONT=’Arial Black’]Any help is greatly appreciated!
    Thanks in advance![/FONT][/SIZE]

    to post a comment
    JavaScript

    3 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @amandaNHTauthorApr 24.2013 — 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.

    [I][B]Also[/B][/I], if the "second item" box is unchecked, it should un-check and disable ALL sub-items for that item.
    Copy linkTweet thisAlerts:
    @PadonakApr 24.2013 — take it as a draft

    <i>
    </i>&lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Items &amp; boxes&lt;/title&gt;
    &lt;style type="text/css"&gt;
    div.item_container input[type=checkbox]{margin-right:10px;}
    input.sub_item{margin-left:30px;}
    div.sub_sp{display:none;}
    &lt;/style&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    $(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');});}
    });
    });
    });
    });
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;form name="myform" id="myform" action=""&gt;
    &lt;div class="item_container"&gt;
    &lt;div&gt;&lt;input type="checkbox" class="main_item" value='chb1' /&gt;First Item&lt;/div&gt;
    &lt;div class="sub_sp"&gt;&lt;input type="checkbox" class="sub_item" value='chb2' /&gt;First Item's 1st sub-item&lt;/div&gt;
    &lt;div class="sub_sp"&gt;&lt;input type="checkbox" class="sub_item" value='chb3' /&gt;First Item's 2nd sub-item&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item_container"&gt;
    &lt;div&gt;&lt;input type="checkbox" class="main_item" value='chb4' /&gt;Second Item&lt;/div&gt;
    &lt;div class="sub_sp"&gt;&lt;input type="checkbox" class="sub_item required" value='chb5' /&gt;Second Item's 1st sub-item (*required)&lt;/div&gt;
    &lt;div class="sub_sp"&gt;&lt;input type="checkbox" class="sub_item" value='chb6' /&gt;Second Item's 2nd sub-item&lt;/div&gt;
    &lt;div class="sub_sp"&gt;&lt;input type="checkbox" class="sub_item" value='chb7' /&gt;Second Item's 3d sub-item&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item_container"&gt;
    &lt;div&gt;&lt;input type="checkbox" class="main_item" value='chb8' /&gt;Third Item&lt;/div&gt;
    &lt;div class="sub_sp"&gt;&lt;input type="checkbox" class="sub_item required" value='chb9' /&gt;Third Item's 1st sub-item (*required)&lt;/div&gt;
    &lt;div class="sub_sp"&gt;&lt;input type="checkbox" class="sub_item" value='chb10' /&gt;Third Item's 2nd sub-item&lt;/div&gt;
    &lt;div class="sub_sp"&gt;&lt;input type="checkbox" class="sub_item" value='chb11' /&gt;Third Item's 3d sub-item&lt;/div&gt;
    &lt;div class="sub_sp"&gt;&lt;input type="checkbox" class="sub_item required" value='chb12' /&gt;Third Item's 4th sub-item (*required)&lt;/div&gt;
    &lt;/div&gt;
    &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    Copy linkTweet thisAlerts:
    @PadonakApr 25.2013 — you welcome
    ×

    Success!

    Help @amandaNHT spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...