javascript - 根据复选框输入禁用 HTML 输入

Question

我正在构建一个 Flask 应用程序，但我的 HTML/JavaScript/JQuery 不是很好。

假设我的 HTML 如下所示:

<table class="table table-bordered table-striped table-hover" align="center" style="border-spacing: 0px">
     <tr style="background-color: DodgerBlue">
         <th>Task</th>
         <th>Task Enabled</th>
         <th>Manual Dates</th>
         <th>Value Date</th>
         <th>Previous Value Date</th>
     </tr>
     <tr>
         <td>First Row</td>
         <td><input type="checkbox" name="aaa1" value="true"></td>
         <td><input type="checkbox" name="aaa2" value="true" onClick="myFunction()"></td>
         <td><input type="date" name="aaa3" id="myCheck" disabled></td>
         <td><input type="date" name="aaa4" disabled></td>
     </tr>
     <tr>
         <td>Second Row</td>
         <td><input type="checkbox" name="bbb1" value="true"></td>
         <td><input type="checkbox" name="bbb2" value="true"></td>
         <td><input type="date" name="bbb3"></td>
         <td><input type="date" name="bbb4"></td>
     </tr>
     <tr>
         <td>Third Row</td>
         <td><input type="checkbox" name="ccc1" value="true"></td>
         <td><input type="checkbox" name="ccc2" value="true"></td>
         <td><input type="date" name="ccc3"></td>
         <td><input type="date" name="ccc4"></td>

     </tr>
</table>

我希望默认禁用每行的第二列和第三列(HTML 日期输入)。如果勾选每行中的第二个复选框，它将启用两个日期输入，如果取消勾选，它将再次禁用两个日期输入。

我目前有这段 JavaScript 代码适用于单个日期输入，但它只适用于第一次点击:

<script>
    function myFunction() {
    document.getElementById("myCheck").disabled = false;
    }
</script>

此表包含 40 多行，并且它们都具有完全相同的格式:

Column 1: Checkbox
Column 2: Checkbox <---- This one determines the state of both date inputs
Column 3: Date input <---- Disabled by default, checkbox determines state
Column 4: Date input <---- Disabled by default, checkbox determines state

根据每行中第二个复选框的点击事件，以编程方式控制每行中 2 个日期输入的状态的最佳方法是什么？

编辑:

<script>
    $('table tr').find(':checkbox:eq(1)').change(function() {
    $(this).closest('tr').find('input[type="date"]').prop('disabled', !this.checked);
    });
</script>

<script>
    $('table tr').find(':checkbox:eq(0)').change(function() {
    $(this).closest('tr').find(':checkbox:eq(1), input[type="date"]').prop('disabled', !this.checked);
    });
</script>

Answer 1

要实现此目的，您可以使用 :eq() 将 change 事件处理程序 Hook 到每行中的第二个复选框。然后您可以使用 closest() 和 find() 获取行中的日期 input 元素并根据需要启用/禁用它们:

$('table tr').find(':checkbox:eq(1)').change(function() {
  $(this).closest('tr').find('input[type="date"]').prop('disabled', !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-hover" align="center" style="border-spacing: 0px">
  <tr style="background-color: DodgerBlue">
    <th>Task</th>
    <th>Task Enabled</th>
    <th>Manual Dates</th>
    <th>Value Date</th>
    <th>Previous Value Date</th>
  </tr>
  <tr>
    <td>First Row</td>
    <td><input type="checkbox" name="aaa1" value="true"></td>
    <td><input type="checkbox" name="aaa2" value="true"></td>
    <td><input type="date" name="aaa3" disabled></td>
    <td><input type="date" name="aaa4" disabled></td>
  </tr>
  <tr>
    <td>Second Row</td>
    <td><input type="checkbox" name="bbb1" value="true"></td>
    <td><input type="checkbox" name="bbb2" value="true"></td>
    <td><input type="date" name="bbb3" disabled></td>
    <td><input type="date" name="bbb4" disabled></td>
  </tr>
  <tr>
    <td>Third Row</td>
    <td><input type="checkbox" name="ccc1" value="true"></td>
    <td><input type="checkbox" name="ccc2" value="true"></td>
    <td><input type="date" name="ccc3" disabled></td>
    <td><input type="date" name="ccc4" disabled></td>

  </tr>
</table>