如何在JQuery中单击最近的元素(复选框)时禁用下一个元素(文本区域)

How to disable the next element(textarea) on click of nearest element(Checkbox) in JQuery?

本文关键字:元素 下一个 区域 文本 复选框 单击 最近 JQuery      更新时间:2023-09-26

单击复选框后,我希望禁用最近的文本区域。

以下是片段:

<div class="pure-u-1 pure-u-md-1-5">
  <input type="checkbox" value="true" class="fRegistrer" name="fRegistrer" id="fRegistrer">
</div>
<div class="pure-u-1 pure-u-md-1-5">
  <textarea cols="200" rows="5" class="normal" name="kommenter" id="kommenter"></textarea>
</div>

在Jquery中:

 onclick="$(this).closest('.textnormal').find('textarea').attr('disabled',true)"

单击复选框时,可以使用closest()获取父级div,使用next()查找下一个同级div,然后使用find()获取包含的textarea。试试这个:

$(':checkbox').change(function() {
    $(this).closest('div').next('div').find('textarea').prop('disabled', !this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pure-u-1 pure-u-md-1-5">
  <input type="checkbox" value="true" class="fRegistrer" name="fRegistrer" id="fRegistrer">
</div>
<div class="pure-u-1 pure-u-md-1-5">
  <textarea cols="200" rows="5" class="normal" name="kommenter" id="kommenter" disabled="true">Foo bar</textarea>
</div>

$('#fRegistrer').click(function () {
    debugger
    $(this).parent('.pure-u-1').next().find('#kommenter').attr('disabled',true);
});  

DEMO