Question

使用Jquery ......

我希望能够获取父div，并搜索任何内部元素，以找到可以在父元素中嵌套ANYWHERE的特定元素。

然后我接受这些元素并根据它们的价值进行搜索，禁用/启用不同的元素......

我也希望这样做，以便我可以有多组父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>

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

我在第一组文本框中所做的任何更改都会启用/禁用第一组的提交按钮..对于第二组也是如此。

现在我设置了jquery，以便通过将父div的类设置为SubmitDisable而没有嵌套比父div更远的方式它可以工作....

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

    });
});

有什么想法？最终我希望能够使用这个jquery的任何页面，并在一组文本框和提交按钮周围放置一个div，如果同一“组”中的所有文本框都会导致按钮被禁用没有填写。

为了帮助想象这需要如何运作，我添加了一个可以针对此进行测试的假设代码块

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

老实说，那种设置首先会是非常糟糕的设计...但我并不总是能控制设计。在这种情况下，如果您键入3个文本框中的任何一个，它需要检查以确保所有文本框都有数据，如果它们都有数据，则启用提交，如果没有，则禁用。

Answer 1

好的，因为唯一可靠的数据是容器div.parent，可以解决它周围的一切：

如果所有这些输入都为空，我假设您要禁用与输入组相关的提交按钮。

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

    });


    });

你可以看到它正常工作here（你首先要输入一些东西，然后删除它，因为代码只能在密钥上运行）

Answer 2

2个字......蛮力......我真的不确定是否还有其他办法可以做到这一点......

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

我基本上是把这个对象一次踩到一个父母，直到我找到'父'div然后找回我的方式......赞成像素来建议找到

如果有人能找到更好的方法来做到这一点，我们将不胜感激。

JQuery＆amp;嵌套元素

2 个答案: