根据复选框输入禁用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代码可用于1个日期输入，但仅在第一次单击时有效：

<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事件处理程序挂钩到每一行的第二个复选框。 然后，您可以使用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> 

Answer 2

您可以在文档准备就绪时禁用日期输入，如下所示，然后单击按钮可以再次启用

 $(document).ready(function() { $(':input[type="date"]').prop('disabled', true); } 

Answer 3

您可以在启用日期字段的复选框上放置onlclick（）事件，然后将复选框的ID传递到要启用的字段的函数中，再加上复选框本身的ID。

<td><input type="checkbox" name="aaa2" id="test" value="true" onClick="myFunction('myCheck','mycheck2', this.id)"></td>
<td><input type="date" name="aaa3" id="myCheck" disabled></td>
<td><input type="date" name="aaa3" id="myCheck2" disabled></td>

<script>
    function myFunction(date1, date2, test) {
        if(document.getElementById(test).checked){
            document.getElementById(date1).disabled = false;
            document.getElementById(date2).disabled = false;
        }
        else{
            document.getElementById(date1).disabled = true;
            document.getElementById(date2).disabled = true;
        }
    }
</script>