如何通过勾选/取消勾选复选框实现紧邻输入框的启用与禁用功能

你现有代码失效的核心原因是 jQuery 的 next() 方法只会匹配当前元素的直接相邻下一个兄弟节点，你的复选框后面第一个节点是 <label> 标签，不是目标.inputs输入框，所以选择器命中失败，逻辑无法生效。

调整后的JS逻辑 #

$(document).on('change', '.check:checkbox', function(){
  // 先定位到当前复选框所在的父容器，再查找容器内的目标输入框
  const $targetInput = $(this).closest('div').find('.inputs');
  // 直接用勾选状态反向设置disabled属性，简化if else判断
  $targetInput.prop('disabled', !this.checked);
});

HTML注意事项 #

你现有HTML代码中所有div的class属性都漏写了等号，需要把class"one"、class"two"、class"three"修改为class="one"、class="two"、class="three"，避免后续样式或选择器出现异常。

这个写法的兼容性更强，就算后续你调整了复选框和输入框之间的标签结构，只要二者还在同一个父div容器内，功能逻辑就不会失效。

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