Databases
StackOverflow2013
Postsdbo
POdisable group of inputs if another input group has data entered
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdisable group of inputs if another input group has data entered
    text
    copied!<p>I am systematically trying to give my app a way to disable and enable groups of inputs based on whether on of the groups of inputs has anything entered. I started playing around with how to do this in jFiddle, but I am currently stuck.</p> <p>Problem is I am having trouble getting it to work on multiple groups.. works fine on one group.</p> <p>Here is my jFiddle and Code:</p> <p><a href="http://jsfiddle.net/3t5RL/5/" rel="nofollow">http://jsfiddle.net/3t5RL/5/</a></p> <pre><code>&lt;div class="one_or_other"&gt; &lt;h1&gt;Some Input Group&lt;/h1&gt; &lt;p class="ooo_group_1"&gt; &lt;input type="text" data-disable='["ooo_group_2","ooo_group_3"]' /&gt; &lt;input type="text" data-disable='["ooo_group_2","ooo_group_3"]' /&gt; &lt;/p&gt; OR &lt;p class="ooo_group_2"&gt; &lt;input type="text" data-disable='["ooo_group_1","ooo_group_3"]' /&gt; &lt;input type="text" data-disable='["ooo_group_1","ooo_group_3"]' /&gt; &lt;/p&gt; OR &lt;p class="ooo_group_3"&gt; &lt;input type="text" data-disable='["ooo_group_1","ooo_group_2"]' /&gt; &lt;input type="text" data-disable='["ooo_group_1","ooo_group_2"]' /&gt; &lt;/p&gt; &lt;/div&gt; &lt;div class="one_or_other"&gt; &lt;h1&gt;Some Other Input Group&lt;/h1&gt; &lt;p class="ooo_group_1"&gt; &lt;input type="text" data-disable='["ooo_group_2","ooo_group_3"]' /&gt; &lt;input type="text" data-disable='["ooo_group_2","ooo_group_3"]' /&gt; &lt;/p&gt; OR &lt;p class="ooo_group_2"&gt; &lt;input type="text" data-disable='["ooo_group_1","ooo_group_3"]' /&gt; &lt;input type="text" data-disable='["ooo_group_1","ooo_group_3"]' /&gt; &lt;/p&gt; OR &lt;p class="ooo_group_3"&gt; &lt;input type="text" data-disable='["ooo_group_1","ooo_group_2"]' /&gt; &lt;input type="text" data-disable='["ooo_group_1","ooo_group_2"]' /&gt; &lt;/p&gt; &lt;/div&gt; </code></pre> <p>AND</p> <pre><code>$('.one_or_other').each(function() { block = $(this); block.find('input').keyup( function() { if(this.value.length !== 0) { json = $(this).data('disable'); $.each(json, function(i,item) { block.find('.' + item + ' input').prop('disabled',true).addClass('disabled'); }); } else { block.find('input').prop('disabled',false).removeClass('disabled'); } }); }); </code></pre>
 

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