JQuery & nested elements

Question

Using Jquery...

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.

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

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...

so if I have...

<div class="parent">
    <table>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" />
            </td>
        </tr>
    </table>
</div>

<div class="parent">
    <table>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" />
            </td>
        </tr>
    </table>
</div>

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.

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....

$(document).ready(function() {

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


    $('.SubmitDisable > 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');
            }
        });

    });
});

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.

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

<div class="SubmitDisable">
<div><div><div><input type="text" /></div></div></div>
<div><table><tr><td><div><input type="text" /></div></td></tr></table>
<span><div><b><input type="text" /></b></div></span>
<input type="submit" />
</div>

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.

Answer 1

OK, since the only sure data is the container div.parent, work everything around it:

I assumed you wanted to disable submit buttons pertaining to an input group if all these inputs were empty.

    $(document).ready(function() {
$('.SubmitDisable > input[type=submit]').attr('disabled', 'disabled');
$('div.parent input[type="text"], div.parent input[type="textarea"]').keyup(function(){

var parent = $(this).parents('div.parent');
$('input[type="submit"]',parent).attr('disabled','disabled');

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

    });


    });

you can see it working here (you have first to enter something, then delete it, because the code runs only on keyup )

Answer 2

2 words... brute force... I'm really not sure if there is any other way to do this...

$(document).ready(function() {
    $('.SubmitDisable').find('input[type=submit]').attr('disabled', 'disabled');
    $('.SubmitDisable').find('input[type=text], textarea').keyup(function() {
        var objParent = $(this).parent();
        while (!($(objParent).attr('class') == 'SubmitDisable')) {
            var objParent = $(objParent).parent();
        }
        $(objParent).find('input[type=submit]').removeAttr('disabled');
        $.each($(objParent).find('input[type=text], textarea'), function() {
            if ($(this).val() == "") {
                $(objParent).find('input[type=submit]').attr('disabled', 'disabled');
            }
        });
    });
});

I'm basically taking this object and stepping back up one parent at a time until i find the 'Parent' div and then finding my way back down... kudos to pixeline for suggesting the find

If anyone can find a better way to do this it would be greatly appreciated.