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

Question

单击复选框时，我希望禁用下一个最近的文本区域。

以下是片段:

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

Answer 1

单击复选框后，您可以使用 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>