Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Restructuring the HTML is the key:</p> <pre><code>&lt;li&gt;What would you like to see happen to your business when you (or a co-owner) die, become disabled, or retire? &lt;br/&gt; &lt;ul&gt; &lt;li&gt; &lt;input type="radio" name="loss" id="losssold" value="sold"/&gt; &lt;label for="losssold"&gt; Sold to other Owners/another Business &lt;/label&gt; &lt;ul class="nestedList"&gt; &lt;li&gt;Do you have a buy-sell agreement?&lt;br/&gt; &lt;input type="radio" name="has-buy-sell-agreement" id="has-buy-sell-agreementtrue" value="true"/&gt; &lt;label for="has-buy-sell-agreementtrue"&gt; Yes &lt;/label&gt; &lt;input type="radio" name="has-buy-sell-agreement" id="has-buy-sell-agreementfalse" value="false"/&gt; &lt;label for="has-buy-sell-agreementfalse"&gt; No &lt;/label&gt; &lt;br/&gt; &lt;ol class="nestedList"&gt; &lt;li&gt; &lt;label for="buy-sell-last-updated"&gt; When was the agreement last updated? &lt;/label&gt; &lt;br/&gt; &lt;input type="text" name="buy-sell-last-updated" id="buy-sell-last-updated" value=""/&gt; &lt;/li&gt; &lt;li&gt;Is the agreement funded? &lt;br/&gt; &lt;input type="radio" name="buy-sell-is-funded" id="buy-sell-is-fundedtrue" value="true"/&gt; &lt;label for="buy-sell-is-fundedtrue"&gt; Yes &lt;/label&gt; &lt;input type="radio" name="buy-sell-is-funded" id="buy-sell-is-fundedfalse" value="false"/&gt; &lt;label for="buy-sell-is-fundedfalse"&gt; No &lt;/label&gt; &lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; </code></pre> <p>I moved your <code>&lt;input&gt;</code> tags outside of the labels so that all inputs had a direct parent of <code>&lt;li&gt;</code>. This made the jQuery easier to come up with. Here's what I have:</p> <pre><code>$('.nestedList input, .nestedList select, .nestedList textarea').attr('disabled', 'disabled'); $('input:radio').click(function() { $('[name="' + $(this).attr('name') + '"]').each(function() { if($(this).val() != 'false') { if(this.checked == true) { $(this).siblings(".nestedList").children('li').children('input, select, textarea').removeAttr('disabled'); } else { $(this).siblings(".nestedList").children('li').children('input, select, textarea').attr('disabled','disabled'); } } }); }); </code></pre> <p>I've tested this with variations of your HTML and seems to work fine. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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