javascript - 更改选择框时启用文本区域

Question

我有选择框数组和文本区域数组，具有相同的id和类。

  <div class="reasons">
       <select id="reason" class="reason_select" name="reason[]">
           <option>Please Select</option>
           <option value="misc">Misc</option>
        </select>
        <textarea id="reason_comment" name="reason_comment[]" disabled="disabled/>

        <select id="reason" class="reason_select" name="reason[]">
           <option>Please Select</option>
           <option value="misc">Misc</option>
        </select>
        <textarea id="reason_comment" name="reason_comment[]" disabled="disabled/>

        <select id="reason" class="reason_select" name="reason[]">
           <option>Please Select</option>
           <option value="misc">Misc</option>
        </select>
        <textarea id="reason_comment" name="reason_comment[]" disabled="disabled/>
  </div>

在这三对中，更改任何选择框时我需要启用相应的文本区域。

$(document).on("change", ".reason_select", function(){
    //not getting where to start and how to identify corresponding textarea.
});

Answer 1

HTML 中的标识符必须是唯一的 好读 Why is it a bad thing to have multiple HTML elements with the same id attribute?

您可以使用$.fn.next()遍历到直接兄弟。

使用

$(document).on("change", ".reason_select", function(){
    $(this).next('textarea').prop('disabled', false)
});