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

要实现此目的，您可以使用change将:eq()事件处理程序挂钩到每行中的第二个复选框。然后，您可以使用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

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

＆＃13;

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

＆＃13;

Answer 3

您可以在启用日期字段的复选框上放置一个onlclick（）事件，并将复选框的ID传递给您要启用的字段的函数以及复选框本身的ID。

get_object_or_404(RecordType, pk=id)

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

3 个答案: