Jquery not apply for loop call

Question

I have this interface, when I clicked the checkbox, the input will open

I use JQuery for this function and the problem is, only first row is able to open when checked the checkbox. Below are my code:

html:

<div class="row">
      <div class="col">
        <table class="table table-bordered table-hover">
        <tr>
          <th >Name</th>
          <th >Age</th>
        </tr>
        @foreach($peoples as $people)
          <tr>
            <td >
              <input type="checkbox" id="name" name="name" value=""/>&nbsp;&nbsp;
              {{$people->name}}
            </td>
            <td>
              <input type="number" id="age" name="age" value="{{$people->age}}" disabled />
            </td>
          </tr>
        @endforeach

        </table>
      </div>
    </div>

JQuery

<script>
    $(document).ready(function () {
        $('#name').on('change', function () {
            $("#age").prop("disabled", !$(this).is(':checked'));
            $("#age").val('');
        });
    });

    </script>

This seems to repeat the same ID through a loop. This is the wrong way and you have to change the id every time the loop iterates over. — JS KIM
– JS KIM, Commented Mar 4, 2021 at 8:52
Once again - IDs must be unique - $("#age") will only reference the first one — fdomn-m
– fdomn-m, Commented Mar 4, 2021 at 9:09

Mike B · Accepted Answer · 2021-03-04 09:08:58Z

1

This is because you are creating multiple HTML elements with the same ID. You can change those IDs to classes.

Dynamic approach

You can find the .age input that is in checkbox's parent <tr>:

@foreach($peoples as $people)
<tr>
    <td>
        <input type="checkbox" class="name" value=""/>&nbsp;&nbsp;
        {{$people->name}}
    </td>
    <td>
        <input type="number" class="age" value="{{$people->age}}" disabled />
    </td>
</tr>
@endforeach

And in the Javascript you find the .age input that belongs to the parent

$(document).ready(function () {
    $('.name').on('change', function () {
        let input = $(this).closest('tr').find('input.age')
        input.prop("disabled", !$(this).is(':checked'));
        input.val('');
    });
});

With row identifiers

You could also add an addition attribute to those inputs containing unique values of each one:

@foreach($peoples as $people)
    <tr>
    <td >
        <input type="checkbox" class="name" name="name_{{$people->id}}" person-id="{{$people->id}}"value=""/>&nbsp;&nbsp;
        {{$people->name}}
    </td>
    <td>
        <input type="number" class="age" name="age_{{$people->id}}" person-id="{{$people->id}}" value="{{$people->age}}" disabled />
    </td>
    </tr>
 @endforeach

And then in the Javascript take one according to that attribute of the checkbox:

$(document).ready(function () {
    $('.name').on('change', function () {
        let id = $(this).attr('person-id')
        $('input.age[person-id="'+id+'"]').prop("disabled", !$(this).is(':checked'));
        $('input.age[person-id="'+id+'"]').val('');
    });
});

edited Mar 4, 2021 at 9:08

answered Mar 4, 2021 at 8:53

Mike B

2,7942 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

wan programmer Over a year ago

Which is better in your opinion, using Dynamic approach or row identifiers approach ? Is there any specific reason to use which approach is better ?

Mike B Over a year ago

with the dynamic you have to be sure that there will always be the same structure (which i guess you have). With the IDs - you are just exposing IDs in the html code, but its nothing tragical, both are totally fine to use. Just personal preference

wan programmer Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Jquery not apply for loop call

1 Answer 1

Dynamic approach

With row identifiers

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Dynamic approach

With row identifiers

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related