jQuery DataTable分页场景下，勾选复选框无法跨页启用对应文本框

这个问题我太熟了！核心原因就是事件绑定的方式不对——你现在的代码是直接给初始加载的（第一页的）checkbox绑定了change事件，但DataTable分页的时候，第二页及以后的行都是动态生成的新DOM元素，这些新元素并没有被绑定事件，所以操作它们自然没反应。

咱们来拆解下你当前代码的问题：

• table.$("input:checkbox", { "page": "all" }).change(...) 这行是把事件绑定到当时已经存在的checkbox上，分页新增的元素不在这个集合里，所以没被绑定。
• 虽然你用了{page: "all"}来选择所有页面的checkbox，但这只是获取了DataTable维护的所有元素的引用，事件绑定还是只作用在当时已经渲染到页面的那些元素上。

那怎么解决呢？用事件委托就搞定了！把事件绑定到一个不会被销毁的父元素上（比如你的DataTable容器#example），让它监听子元素的change事件，这样不管是初始的还是动态生成的checkbox，触发事件时都会被捕获到。

修改后的代码如下：

var table = $('#example').DataTable();

// 用事件委托绑定到table容器上，监听所有checkbox的change事件
$('#example').on('change', 'input:checkbox', function() {
  var checkboxId = $(this).attr('id');
  // 找到关联的textbox，切换禁用状态
  $('#ID_' + checkboxId).prop('disabled', !$(this).is(':checked'));

  // 如果需要收集所有页面中被勾选的checkbox ID
  var someObj = { Checked: [] };
  table.$('input:checkbox:checked').each(function() {
    someObj.Checked.push($(this).attr('id'));
  });
  // console.log(someObj.Checked);
});

这里的关键要点：

• 事件委托的写法on('change', 'input:checkbox', ...)：父元素#example会监听所有子元素中匹配input:checkbox的change事件，不管这些子元素是一开始就有的还是后来动态生成的。
• 切换textbox状态时，直接用prop('disabled', ...)比document.getElementById(...).disabled更简洁，也更符合jQuery的用法。
• 收集所有勾选ID时，table.$('input:checkbox:checked')依然可以正确获取所有页面的勾选元素，因为DataTable内部会维护所有数据对应的DOM节点。

这样改完之后，不管你切换到哪一页，勾选checkbox时对应的textbox都会正常启用啦！

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