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

Question

i'm building a Flask app and my HTML/JavaScript/JQuery isn't very good.

Let's say my HTML looks like this:

<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>

I want the second and third columns of each row (HTML Date Inputs) to be disabled by default. If you tick the second checkbox in each row, it will enable both of the date inputs, and if you untick it, it will disable both of the date inputs again.

I currently have this JavaScript code that works for 1 date input, but it only works on the first click:

<script>
    function myFunction() {
    document.getElementById("myCheck").disabled = false;
    }
</script>

This table contains 40+ rows, and they all have the exact same format:

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

What would be the best way to programmatically control the states of the 2 date inputs in each row based on the click activity of the second checkbox in every row?

EDIT:

<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

To achieve this you can hook a change event handler to the second checkbox in each row using :eq() . Then you can use closest() and find() to get the date input elements within the row and enable/disable them as required:

 $('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

you can disable the date inputs whenever document is ready as below and on click of the button you can enable again

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

Answer 3

You can put an onlclick() event on the check boxes that enable the date fields and pass the id of the check box into the function of the fields you want enabled plus the id of the checkbox itself.

<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>