Question

有人问类似的问题HERE，因为在任何输入字段的键入事件中，同一行上的所有其他输入字段都被禁用。

在我的情况下，我有两个依赖行：

列“多久”依赖“迟到”列
“迟到”列还取决于是否选中“存在/不存在”

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);
});

应用到您当前正在使用$("#...的任何地方

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

1 个答案: