基於複選框輸入禁用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>