JQuery & nested elements
<p>Using Jquery...</p>

<p>I want to be able to take a parent div, and search through any internal elements to find a particular element that could be nested ANYWHERE with in the parent element.</p>

<p>I'm then taking those elements and searching through them and based on their value, disabling/enabling different element...</p>

<p>I also want to do this in a way so that I can have multiple sets of parent divs that allow the functionality to work in the same way with the particular elements within it... </p>

<p>so if I have...</p>

<pre><code>&lt;div class="parent"&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type="text" /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type="text" /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type="text" /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type="submit" /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;

&lt;div class="parent"&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type="text" /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type="text" /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type="text" /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type="submit" /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>Any changes that I make in the first set of text boxes would enable/disable the submit button for the first group.. and the same for the 2nd group.</p>

<p>Now I have the jquery set so that it works if they are not nested any farther in than the parent div by setting the parent div's class to SubmitDisable....</p>

<pre><code>$(document).ready(function() {

    $('.SubmitDisable &gt; input[type=submit]').attr('disabled', 'disabled');


    $('.SubmitDisable &gt; input[type=text], input[type=textarea]').keyup(function() {
        $(this).siblings('input[type=submit]').removeAttr('disabled');

        $.each($(this).parent().children('input[type=text], input[type=textarea]'), function() {
            if ($(this).val() == "") {
                $(this).siblings('input[type=submit]').attr('disabled', 'disabled');
            }
        });

    });
});
</code></pre>

<p>Any thoughts? Ultimately I want to be able to take any page with this jquery on and put a div around a group of text boxes and submit buttons and it will cause the button(s) to disable if all of the text boxes in the same "group" are not filled in.</p>

<p>To help visualize how this needs to function i've added a hypothetical block of code that may be tested against this</p>

<pre><code>&lt;div class="SubmitDisable"&gt;
&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;input type="text" /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;div&gt;&lt;input type="text" /&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;span&gt;&lt;div&gt;&lt;b&gt;&lt;input type="text" /&gt;&lt;/b&gt;&lt;/div&gt;&lt;/span&gt;
&lt;input type="submit" /&gt;
&lt;/div&gt;
</code></pre>

<p>Now honestly that kind of set up would be horribly bad design in the first place... BUT I'm not always going to have control of the design. in this case if you key up on any of the 3 text boxes it needs to check to make sure that all have data, if they all have data the submit is enabled, if not its disabled.</p>
