i want to disable textbox on click of checkbox. checkboxes are dynamic - php

Question

<script>
$(function () {
$("input:checkbox").click(function () {
if ($(this).is(":checked")) {
var id = $(this).attr('id');
if (id) {
$("#txtPassportNumber").removeAttr("disabled");
$("#txtPassportNumber").focus();
}
} else {
$("#txtPassportNumber").attr("disabled", "disabled");
}
});
});
</script>
This is my jquery code am getting one textbox enabled by this
<label for="chkPassport">
<?php
$select_size = $common->select('size_m', '');
$i = 0;
foreach ($select_size as $sizes) {
$s = $sizes['sizename'];
?>
<input type="checkbox" id="chkPassport<?php echo $s; ?>" class="current"/>
<?php echo $sizes['sizename']; ?>
</label>
qty:
<input type="text" id="txtPassportNumber<?php echo $i;?>" disabled="disabled" class="current<?php echo $s; ?>"/>
<br/>
<?php
$i++;
}
?>
I am not getting id of textbox even i am giving
id="txtPassportNumber<?php $i; ?>"
I am having 5 sizes and on every size i want to add qty when i click S i want to enable its textbox when i click M its textbox must enable.I am getting one textbox enabled onclick of size S because it is not taking my id there.Help me for this

Answer 1

You're asking to solve the selection problem so here is a small 'JQuery' code.
I wonted to explain what I've done with the below code. In your code you were trying to use the ID of the element you wanted to change. The problem is ID's need to be unique for each element if you have the same ID for all then all those elements will be considered as one.
Also you were trying to assign a number to the ID (id="txtPassportNumber<?php echo $i;?>") which makes it double hard to identify.
So what I did in my code is to move the listener from ID to class which makes it easier and free up the ID for you to do what ever you want with it. In the script the JQuery listens to see if there's a click event on the .sizeChk class if it's true then it checks if the click event is to check the check box or not. Then if the check box is checked then it looks for the input .next() to the checked check box.
I used .next() because the input is on to the right hand side if the input was to the left hand side you can use .prev(). After finding the input next to the check box it applies the .prop(). I didn't use .attr() because it's old and not encouraged by JQuery it self.
You only have to keep the class in tact and you can use the same class to any other check box to get the same function on those elements.
A side note: It's best you read up on JQuery a little bit more.
Older Answer which match the description.
$(document).ready(function() {
$('.sizeChk').click(function() {
if ($(this).is(':checked')) {
$(this).next("input").prop('disabled', false).focus();
} else {
$(this).next("input").prop('disabled', true);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chk1" class="sizeChk" />Small:
<input type="text" id="txt1" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk2" class="sizeChk" />Medium:
<input type="text" id="txt2" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk3" class="sizeChk" />Larg:
<input type="text" id="txt3" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk4" class="sizeChk" />xLarg:
<input type="text" id="txt4" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk5" class="sizeChk" />xxLarg:
<input type="text" id="txt5" class="sizeTxt" disabled/>
New updated code
$(document).ready(function() {
$('.sizeChk').click(function() {
if ($(this).is(':checked')) {
$(this).closest('.sizeGroup').find('input[type=text]').prop('disabled', false).focus();
} else {
$(this).closest('.sizeGroup').find('input[type=text]').prop('disabled', true);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sizeGroup">
<input type="checkbox" id="chk1" class="sizeChk" />Small:<br>
<input type="text" id="txt1" class="sizeTxt" disabled/><br><br>
</div>
<div class="sizeGroup">
<input type="checkbox" id="chk2" class="sizeChk" />Medium:<br>
<input type="text" id="txt2" class="sizeTxt" disabled/><br><br>
</div>
<div class="sizeGroup">
<input type="checkbox" id="chk3" class="sizeChk" />Larg:<br>
<input type="text" id="txt3" class="sizeTxt" disabled/><br><br>
</div>
<div class="sizeGroup">
<input type="checkbox" id="chk4" class="sizeChk" />xLarg:<br>
<input type="text" id="txt4" class="sizeTxt" disabled/><br><br>
</div>
Hope this help.
Here is the old jsFiddle.
Here is the updated jsFiddle