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

Question

我的代码中有多个Textbox和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标记旁边。

保持它们在一起，您就完成了。

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

这是更新的小提琴 。

如果不想像这样将它们放在一起，则应使用要禁用的TEXTAREA的ID或CLASS

HTML：

 <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() != "") { $('#comment').attr("disabled", true); } else { $('#comment').attr("disabled", false); } }); } }; $(document).ready(a.init()); 

如这个小提琴所示。