使用相关复选框jQuery启用/禁用数组生成的输入 [英] enable/disable generated input by array with relevant checkbox jQuery

问题描述

如何启用从数组循环产生的输入字段以及复选框.我试图禁用生成的输入字段，并且仅在选中特定的对应复选框时才启用该字段.我尝试按照此示例启用带有其禁用输入文本相应的复选框jquery ，但无济于事.

How can I enable input field generated in result of a loop from array along with checkbox. I trying to disable the generated input fields and enable the one only when particular corresponding checkbox is checked. I've tried to follow this example enable disable inputs text with its corresponding checkbox jquery but couldn't help my self.

$ voucher数组:

$voucher array:

Array
(
    [7] => 95976X7F545
    [9] => C53DVEFCC
)

来源:

<?php
foreach ($voucher as $vou) {
    if($vou['payment_voucher_code']!=''){?>
    <div class="col-lg-3">
        <span class="input-group-addon">
        <input type="checkbox" id="chk"></span>
        <div>
            <input name="ex_code[<?php echo $vou['payment_voucher_id'];?>]" id="ex_code" value="<?php echo $vou['payment_voucher_code'];?>" disabled />
        </div>
    </div>
<?php   
    }   
}
?>

HTML:

<div class="col-lg-3">
    <span class="input-group-addon">
        <input type="checkbox" id="chk">
    </span>
    <div>
         <input name="ex_code" value="95976X7F545" disabled="disabled">
    </div>
</div>
<div class="col-lg-3">
    <span class="input-group-addon">
         <input type="checkbox" id="chk">
    </span>
    <div>
        <input name="ex_code" value="C53DVEFCC" disabled="disabled">
    </div>
</div>

JS:

$('#chk').change(function() {
    $('#ex_code').attr('disabled',!this.checked)
});

结果:

推荐答案

可以稍微修改一下代码吗?您可以尝试以下解决方案.

Can you slightly modify your code? You can try the below solution.

来源:

<?php
 foreach ($voucher as $vou) {
   if($vou['payment_voucher_code']!=''){?>
    <div class="col-lg-3">
      <span class="input-group-addon">
      <input type="checkbox" id="chk_<?php echo $vou['payment_voucher_id'];?>" name="chk[]"></span>
      <div>
        <input id="ex_code_<?php echo $vou['payment_voucher_id'];?>" name="ex_code[]" value="<?php echo $vou['payment_voucher_code'];?>" disabled />
      </div>
    </div>

这将产生HTML:

 <div class="col-lg-3">
  <span class="input-group-addon">
    <input type="checkbox" id="chk_1" name="chk[]" />
  </span>
  <div>
    <input name="ex_code_1" name="ex_code[]" value="95976X7F545" disabled="disabled" />
  </div>
</div>
<div class="col-lg-3">
  <span class="input-group-addon">
    <input type="checkbox" id="chk_2" name="chk[]" />
  </span>
  <div>
    <input name="ex_code_2" name="ex_code[]" value="C53DVEFCC" disabled="disabled" />
  </div>
</div>
 <?php   
    }   
   }
 ?>

最后您的JS将是:

$(':checkbox').change(function() {
 var chk_id = $(this).attr('id');
 var id = chk_id.split("_");
 var real_id = id[1];
 if($("#chk_"+real_id).is(':checked')){
   $("#ex_code_"+real_id).prop('disabled', false);
 }
 else {
   $("#ex_code_"+real_id).prop('disabled', true);
 }
});

希望这会有所帮助.让我知道是否有问题.

Hope this will help. Let me know if any issue.

这篇关于使用相关复选框jQuery启用/禁用数组生成的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！