Databases
StackOverflow2013
Postsdbo
POJavascript: Dynamic Check box (Fieldset with Father/Child Checkboxes)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript: Dynamic Check box (Fieldset with Father/Child Checkboxes)
    primarykey
    data
    text
    <p>I have a problem here, when I select any of the 'father' checkboxes all the child checkboxes are getting enabled or disabled. So I need each father checkbox to affect it own child fieldset. Could someone help me with this.</p> <p>Thank you</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;toggle disabled&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;style type="text/css"&gt; .cssDisabled { color: #ccc; } &lt;/style&gt; &lt;script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; Event.observe(window, 'load', function(){ // for all items in the group_first class $$('.father').each(function(chk1){ // watch for clicks chk1.observe('click', function(evt){ dynamicCheckbox(); }); dynamicCheckbox(); }); }); function dynamicCheckbox (){ // count how many of group_first are checked, // doEnable true if any are checked var doEnable = ($$('.father:checked').length &gt; 0) ? true : false; // for each in group_second, enable the checkbox, and // remove the cssDisabled class from the parent label $$('.child').each(function(item){ if (doEnable) { item.enable().up('label').removeClassName('cssDisabled'); } else { item.disable().up('label').addClassName('cssDisabled'); } }); }; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;fieldset&gt; &lt;legend&gt;First Group&lt;/legend&gt; &lt;label&gt;&lt;input type="checkbox" value="1" class="father" /&gt;Check box 1&lt;/label&gt;&lt;br /&gt; &lt;label&gt;&lt;input type="checkbox" value="2" class="father" checked/&gt;Check box 2&lt;/label&gt; &lt;/fieldset&gt; &lt;fieldset&gt; &lt;legend&gt;Second Group&lt;/legend&gt; &lt;label class="cssDisabled"&gt;&lt;input type="checkbox" value="x" class="child" disabled="disabled" /&gt;Check box x&lt;/label&gt;&lt;br /&gt; &lt;label class="cssDisabled"&gt;&lt;input type="checkbox" value="y" class="child" disabled="disabled" /&gt;Check box y&lt;/label&gt;&lt;br /&gt; &lt;label class="cssDisabled"&gt;&lt;input type="checkbox" value="z" class="child" disabled="disabled" /&gt;Check box z&lt;/label&gt; &lt;/fieldset&gt; &lt;fieldset&gt; &lt;legend&gt;First Group&lt;/legend&gt; &lt;label&gt;&lt;input type="checkbox" value="3" class="father" /&gt;Check box 1&lt;/label&gt;&lt;br /&gt; &lt;/fieldset&gt; &lt;fieldset&gt; &lt;legend&gt;Second Group&lt;/legend&gt; &lt;label class="cssDisabled"&gt;&lt;input type="checkbox" value="x" class="child" disabled="disabled" /&gt;Check box x&lt;/label&gt;&lt;br /&gt; &lt;label class="cssDisabled"&gt;&lt;input type="checkbox" value="y" class="child" disabled="disabled" /&gt;Check box y&lt;/label&gt;&lt;br /&gt; &lt;label class="cssDisabled"&gt;&lt;input type="checkbox" value="z" class="child" disabled="disabled" /&gt;Check box z&lt;/label&gt; &lt;/fieldset&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRob W
    1. USBoDiE2003
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI am not exactly sure what functionality you're wanting but if you only want actions to apply to one set then give each set their own class maybe something like father1 and child1 and father2 and child2
      singulars
      1. POJavascript: Dynamic Check box (Fieldset with Father/Child Checkboxes)
      1. USJack
    2. COMaybe, but there is where I'm stucked, I want to do the JS code dynamic, to automatically check the father and child ids and link them. Adding an Id number to the classes it's a good idea. If someone would show me a short example, would help me, thanks.
      singulars
      1. POJavascript: Dynamic Check box (Fieldset with Father/Child Checkboxes)
      1. USBoDiE2003
    3. COIf you used jQuery instead of prototype.js, you would have gotten tons of answers by now.
      singulars
      1. POJavascript: Dynamic Check box (Fieldset with Father/Child Checkboxes)
      1. USJose Basilio
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload