Question

我的代码中有多个Textbox和Textarea。

我在所有文本框中保持了普通孩子的习惯。

我期望的是当用户输入任何值时，应该禁用VERY NEXT TEXTAREA。以下是结构

<div>
<div>
    <input type="text" class="kid" value="" name="kid" id="kid" />
</div>
<div>
    <div></div>
    <div>
        <textarea cols="30" rows="2" name="comment" id="comment">  </textarea>
    </div>
</div>
</div>

无效的JQuery代码是：

var a = {
init: function () {
    $(".kid").on("change keyup paste", function () {
        if ($(this).val() != "") {
            $(this).next().attr("disabled", true);
        } else {
            $(this).next().attr("disabled", false);
        }
    });
}
};
$(document).ready(a.init());

小提琴：https://jsfiddle.net/0f6vp938/

Answer 1

var a = {
    init: function () {
        $(".kid").on("change keyup input", function () {
            if ($(this).val() != "") {
                $(this).parent().next().find('textarea').prop("disabled", true);
            } else {
                $(this).parent().next().find('textarea').prop("disabled", false);
            }
        });
    }
};
$(document).ready(a.init());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
    <div>
        <input type="text" class="kid" value="" name="kid" id="kid" />
    </div>
    <div>
        <div></div>
        <div>
            <textarea cols="30" rows="2" name="comment" id="comment"></textarea>
        </div>
    </div>
</div>

Answer 2

使用prop()代替attr()：

var a = {
    init: function () {
        $(".kid").on("change keyup paste", function () {
            if ($(this).val() != "") {
                $("#comment").prop("disabled", true);
            } else {
                $("#comment").prop("disabled", false);
            }
        });
    }
};
$(document).ready(a.init());

小提琴：https://jsfiddle.net/0f6vp938/5/

Answer 3

或许这样的事情？

    var a = {
    init: function () {
        $(".kid").on("change keyup paste", function () {
            var $inp = $(this);
            var v = $inp.val().trim();

            if (v != "") {
                $inp.parent('div').parent('div').find('textarea').prop('disabled', 'disabled');
            } else {
                $inp.parent('div').parent('div').find('textarea').prop('disabled', false);
            }

        });
    }
    };
    $(document).ready(a.init());

Answer 4

在你提供的小提琴中，TEXTAREA并不是INPUT标签的旁边。

将它们放在一起，你就可以了。

PDO

以下是更新后的fiddle。

如果您不想将它们保持在一起，那么您应该使用要禁用的TEXTAREA的ID或CLASS

HTML：

<div>
    <div>
        <input type="text" class="kid" value="" name="kid" id="kid" />
        <textarea cols="30" rows="2" name="comment" id="comment"></textarea>
    </div>
</div>

jQuery的：

<div>
    <div>
        <input type="text" class="kid" value="" name="kid" id="kid" />
    </div>
    <div>
        <div></div>
        <div>
            <textarea cols="30" rows="2" name="comment" id="comment"></textarea>
        </div>
    </div>
</div>

如此fiddle所示。

如何在JQuery中更改文本框时禁用下一个textarea？

4 个答案: