如何在checkbox勾选时启用/禁用对应文本框（数据库生成多复选框场景）

原有代码的问题是全局选择器$('.checks')会匹配所有文本框，导致勾选任意复选框时所有文本框都会被同步启用/禁用，调整为仅操作当前复选框对应的目标文本框即可：

修正后的JS代码 #

$(function() {
  $('.check').on('click', function() {
    // 定位当前复选框对应的相邻文本框
    const $targetInput = $(this).next('.checks');
    if ($(this).prop('checked')) {
      $targetInput.removeAttr('disabled').focus();
    } else {
      $targetInput.attr('disabled', 'disabled').val('');
    }
  });
});

无需改动的HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>

<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>

<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>

如果实际业务中生成的DOM结构里文本框和复选框不是直接相邻，可以替换$(this).next('.checks')为$(this).nextAll('.checks').eq(0)，同样可以精准匹配到对应文本框。

内容的提问来源于stack exchange，提问作者ALDRIN ATOLLE