如何禁用同一行的其他輸入字段

Question

類似的問題被問這里禁止對同一行的所有其他輸入字段上KEYUP的任何輸入字段的事件。

就我而言，我有兩個依賴行：

1. “多長時間”列取決於“遲到”列
2. 列“遲到”還取決於是否選中“存在/不存在”

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>

腳本：

$(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');
        }
    });
});

當前它在第一行上工作； 而且我已經花了數小時試圖使其適用於任意數量的行，但沒有成功。

任何幫助將不勝感激，在此先感謝您

Answer 1

 $("#is_late").change(

停止對多個元素使用相同的ID-ID在整個頁面中必須是唯一的-而是開始使用類。

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

和

$(".is_late").change(

然后，您需要限制在當前行，給出：

$(".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);
});

在您當前使用$("#...