如何禁用JQuery中點擊最近元素（複選框）的下一個元素（textarea）？

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>

Answer 2

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

DEMO