enable/disable generated input by array with relevant checkbox jQuery

Question

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 array:

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

SOURCE:

<?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)
});

RESULT:

Did you forget to include what you had tried so far? Or are you hoping boostrap will handle this for you? Are you sure they're "dynamically generated"? looks like you're generating them in the php which would not be considered "dynamically generated" (which means generated after the page has first rendered) — fdomn-m
– fdomn-m, Commented Sep 9, 2019 at 8:07
@freedomn-m I have given the link of what I tried to follow but in my case, input fields are being generated in a loop with and passing their values in array — Faisal
– Faisal, Commented Sep 9, 2019 at 8:11
Please post your js code as well. Do you want to disable field if the respective checkbox is unchecked, and enable field if the respective checkbox is checked? — Alok Mali
– Alok Mali, Commented Sep 9, 2019 at 8:13
@freedomn-m I have added the js in post and When I removed the array from text and checkbox id. It works only for first input. how can I make it work for every input? — Faisal
– Faisal, Commented Sep 9, 2019 at 9:08

Alok Mali · Accepted Answer · 2019-09-09 11:03:02Z

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

SOURCE :

<?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>

This will produce the 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   
    }   
   }
 ?>

And finally your JS will be :

$(':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.

fdomn-m · Accepted Answer · 2019-09-09 10:35:58Z

0

The linked SO question/answer shows how to enable/disable an input with a tickbox, but doesn't fit this scenario 100% due to slightly different HTML layout.

So it's a case of locating the related inputs. One way is to use .closest to find a common parent then .find to find the relevant input:

$(':checkbox').change(function() {
  $(this)
    .closest(".col-lg-3")
    .find("[name=ex_code]")
    .prop('disabled', !$(this).is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

edited Sep 9, 2019 at 10:35

answered Sep 9, 2019 at 8:16

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

2 Comments

fdomn-m Over a year ago

TBH you're not helping yourself - you say you've tried some code but not said why it doesn't work then included some code that partially works but (as provided) won't work. Then you've not said why this doesn't work.

fdomn-m Over a year ago

I've updated it to a snippet: Using your HTML showing this working. If this doesn't work for you then you'll need to tell us the difference / provide your actual HTML.

Collectives™ on Stack Overflow

enable/disable generated input by array with relevant checkbox jQuery

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related