根據復選框輸入禁用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>