如何使用jQuery实现页面加载时按checkbox状态禁用对应tr内的input

问题原因 #

你写的代码失效的核心原因有两点：

• 调用fn_chkBox('.form-check-input')时，函数没有接收处理传入的选择器参数，也没有遍历对应复选框执行逻辑，且直接调用函数时内部的this指向为全局window对象，不是你要判断的复选框元素，所以判定逻辑完全不生效
• change事件绑定写在了DOM加载回调外部，如果代码执行时DOM还没渲染完成，事件绑定会失效，同时重复写了两次相同的状态切换逻辑，没有必要

修复后可运行代码 #

仅需替换原有JS逻辑即可，HTML部分不需要修改：

$(function() {
  // 封装复选框关联控制逻辑
  function fn_chkBox() {
    const isDisabled = !$(this).is(':checked');
    $(this).closest("tr").find("input.form-control").prop("disabled", isDisabled);
  }

  // 页面加载完成后遍历所有复选框，初始化对应行输入框状态
  $(".form-check-input").each(fn_chkBox);

  // 绑定复选框状态变更事件，复用同一控制逻辑
  $(".form-check-input").change(fn_chkBox);
});

修改后即可实现你要的效果：页面加载时自动检测所有行的复选框状态，未勾选的行内输入框直接禁用，后续切换复选框勾选状态也能同步控制对应行输入框的禁用状态。

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