基于复选框输入禁用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>