How to disable other input fields of same row

Question

A similar question was asked HERE disabling all other input fields on same row on keyup event of any of the input fields.

In my case i have two dependents rows:

1. the column "How long" depends on "is late" column
2. the column "is late" also depends on whether Present / Absent is checked or not

HTML:

    <form method="post">
   <tr>
      <th>Student</th>
      <th>Roll</th>
      <th>Present / Absent</th>
      <th>Is late</th>
      <th>How long (minutes)</th>
   </tr>
   <tr>
      <td>
         User1
      </td>
      <td>
         001
      </td>
      <td>
         <div>
            <input type="checkbox" id="checkbox2"/>
            <label id="labelCheckbox2" class="form-check-label" for="checkbox2">Absent</label>
         </div>
      </td>
      <td>
         <div>
            <label>
            No
            <input type="checkbox" id="is_late" disabled>
            <span></span> Yes
            </label>
         </div>
      </td>
      <td>
         <input type="number" id="late_coming" name="late_coming_time" hidden>
      </td>
   </tr>
   </table>
   <button type="submit" id="saveAttendance" hidden>
   Save
   </button>
</form>

Script:

$(document).ready(function(){
    // present / absent
    $("#materialChecked2").change(function(){
        var isChecked = $('#materialChecked2').prop('checked');
        if (isChecked){
            $('#labelMaterialChecked2').text('Present');
            $('#is_late').removeAttr('disabled');
        }else{
            $('#labelMaterialChecked2').text('Absent');
            $('#is_late').removeAttr('checked');
            $('#is_late').attr('disabled', 'disabled');
        }
    });

    // late coming
    $("#is_late").change(function(){
        var isChecked = $('#is_late').prop('checked');
        if (isChecked){
            console.log("checked")
            $('#late_coming').removeAttr('hidden');
        }else{
            $('#late_coming').attr('hidden', 'hidden');
        }
    });
});

It currently work on the first row; and i've spend hours trying to make it work for any number of rows but no success.

Any help will be appreciated, thank you in advance

Answer 1

 $("#is_late").change(

Stop using the same ID for multiple elements - IDs must be unique in the whole page - and start using classes instead.

<input type="checkbox" class="is_late" disabled>

and

$(".is_late").change(

You then need to limit to the current row, giving:

$(".is_late").change(function() {
    var row = $(this).closest("tr");

    var isChecked = $(this).prop('checked');
    if (isChecked) {
        console.log("checked")
        row.find(".late_coming").removeAttr('hidden');
    } else {
        row.find(".late_coming").attr('hidden', 'hidden');
    }

    // or just:
    //row.find(".late_coming").show(isChecked);
});

Apply where ever you are currently using $("#...