Javascript HTML input array PHP

Question

I was designing a web application and got stuck in an input form.

I have a list of services which i am showing dynamically with php like this,

while($row=$result->fetch_assoc())
{
extract($row);
echo "<td>$service</td>";

echo "<td><input type='checkbox' name='ac[]'>'</td>";
echo "<td><input type='text' name='as[]' disabled>'</td>";
echo "<td><input type='text' name='ad[]' disabled>'</td>";
}

Now what this is doing is printing at least 10 or twenty service names one after the other and also printing a checkbox and two textboxes beside each of them for taking inputs.

Now what I want to do is to make it such that the text boxes are disabled unless I check the check box.

Is this possible? I need some help.

Sloan Thrasher · Accepted Answer · 2018-08-12 10:42:14Z

Building on Gyney Saramali's answer, the Javascript below will work both when the checkbox is checked and un-checked.

$('.checkbox').click(function(){
  var state = $(this).parents('td').siblings('td').children('input[type=text]').attr('disabled');
  $(this).parents('td').siblings('td').children('input[type=text]').attr('disabled', !state);
});

To explain the jQuery code:

$(this) refers to the check box that was clicked.
.parents('td') refers to the parent object of the checkbox (IOW, the td containing the checkbox).
.siblings('td') refers to the siblings of the td.
.children('input[type=text]') refers to the contents of the td's, just the input fields of type text.
.attr('disabled',!state) sets the state of the disabled attribute. The variable state is the current state of the text fields and the ! invert the value. If false, it makes it true, and if true, makes it false.

Güney Saramalı · Accepted Answer · 2018-08-12 09:32:58Z

0

Here is a live demo. What i did is giving class to your checkbox and on click, i find the inputs and change disabled attribute to false.

HTML

<table>
  <tr>
    <td><input type='checkbox' name='ac[]' class="checkbox"></td>
    <td><input type='text' name='as[]' disabled></td>
    <td><input type='text' name='ad[]' disabled></td>
  </tr>
  <tr>
    <td><input type='checkbox' name='ac[]' class="checkbox"></td>
    <td><input type='text' name='as[]' disabled></td>
    <td><input type='text' name='ad[]' disabled></td>
  </tr>
  <tr>
    <td><input type='checkbox' name='ac[]' class="checkbox"></td>
    <td><input type='text' name='as[]' disabled></td>
    <td><input type='text' name='ad[]' disabled></td>
  </tr>
</table>

JS

$('.checkbox').click(function(){
  $(this).parents('td').siblings('td').children('input').attr('disabled', false);
});

answered Aug 12, 2018 at 9:32

Güney Saramalı

8091 gold badge12 silver badges19 bronze badges

4 Comments

Fred Flintstone Over a year ago

Thanks for the quick reply. But I'm not that good in jquery. It would be great if you could explain the JS part a little.

Sloan Thrasher Over a year ago

This doesn't check if the checkbox is unchecked. Once checked, the text fields remain enabled.

Güney Saramalı Over a year ago

@FredFlintstone the first line of JS says that on clicking an element the class with checkbox do a function. second line is inside of the function and says this = clicked checkbox, parents('td') = clicked checkbox parent table data cell, siblings('td') = says it to find clicked checkbox's parent's siblings, children('input') = to find sibling's inputs in them, and lastly .attr = the main function which disables the disabled attribute.

Güney Saramalı Over a year ago

@SloanThrasher Here we show the way, not hardcoding anybody's projects.

Collectives™ on Stack Overflow

Javascript HTML input array PHP

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related