如何在JQuery的文本框改变时禁用下一个文本区域

How to disable very next textarea on change of textbox in JQuery?

本文关键字：文本 区域 下一个 改变 JQuery      更新时间：2023-09-26

在我的代码中有多个文本框和文本区

我在所有的文本框中都保留了kid class。

我期望的是当用户输入任何值时，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/

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>

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

也许是这样的?

    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());

在您提供的代码中，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());

相关文章：