如何基于数组循环生成的Checkbox启用对应Input字段？

我来帮你搞定这个问题！你现在遇到的核心问题是重复的ID导致jQuery只能选中第一个元素——HTML里ID必须是唯一的，所以原代码只会对第一组Checkbox和Input生效。咱们一步步修改：

第一步：修改PHP生成代码（避免重复ID） #

把原来重复的id="chk"和id="ex_code"改成类名，同时通过DOM结构关联每组的Checkbox和Input，这样更简洁易维护：

<?php foreach ($voucher as $vou) { 
    if($vou['payment_voucher_code']!=''){
        $vouId = $vou['payment_voucher_id'];
?>
<div class="col-lg-3 voucher-group">
    <span class="input-group-addon">
        <!-- 用类名替代重复的id，去掉冗余id -->
        <input type="checkbox" class="voucher-checkbox">
    </span>
    <div>
        <!-- 保留name的数组格式，用类名标记input -->
        <input name="ex_code[<?php echo $vouId;?>]" class="voucher-input" value="<?php echo $vou['payment_voucher_code'];?>" disabled />
    </div>
</div>
<?php } } ?>

第二步：修改jQuery代码（关联对应元素） #

现在通过类名选中所有Checkbox，然后利用DOM结构找到当前Checkbox所属分组里的Input，实现每组独立控制：

// 给所有voucher-checkbox绑定change事件
$('.voucher-checkbox').change(function() {
    // 找到当前Checkbox所在的voucher-group容器，再定位里面的voucher-input
    const targetInput = $(this).closest('.voucher-group').find('.voucher-input');
    // 用prop()处理disabled布尔属性（比attr()更适合这类状态属性）
    targetInput.prop('disabled', !this.checked);
});

补充说明 #

1. 为什么不用attr()？：disabled是布尔属性，prop()能直接处理布尔值状态，而attr()操作的是HTML属性，在状态切换时可能出现不一致的情况。
2. 替代方案（自定义属性关联）：如果不想依赖DOM结构，也可以给Checkbox加data-target属性关联Input的name，比如：

   <input type="checkbox" class="voucher-checkbox" data-target="ex_code[<?php echo $vouId;?>]">
   

   对应的jQuery代码：

   $('.voucher-checkbox').change(function() {
       const targetName = $(this).data('target');
       $(`input[name="${targetName}"]`).prop('disabled', !this.checked);
   });
   

这样修改后，每组Checkbox和Input就能独立工作，勾选对应的Checkbox时，它所在分组的Input就会启用，取消勾选则禁用。

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