Disable HTML inputs based on checkbox input

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>

Rory McCrossan · Accepted Answer · 2017-08-30 16:34:51Z

2

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>

answered Aug 30, 2017 at 16:34

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Harrison Over a year ago

Awesome! This worked. One more quick thing, what would it look like to have the first checkbox disable/enable the other 3 columns? An additional function i'm assuming?

Rory McCrossan Over a year ago

Yes, that would be another function with similar logic on checkbox :eq(0)

Harrison Over a year ago

How can I include more than 1 input type in the find function?

Rory McCrossan Over a year ago

Use a comma to separate them: find(':checkbox:eq(1), input[type="date"]')

Harrison Over a year ago

I just added an update. With this, the other 3 columns are disabled, but when I click the first checkbox, the dates become available. When I double click the second checkbox then the dates disable. What can I do to make sure that when the first checkbox is clicked the dates are disabled by default until the second checkbox is clicked.

|

samnu pel · Accepted Answer · 2017-08-30 16:31:34Z

0

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);
     }

answered Aug 30, 2017 at 16:31

samnu pel

9245 silver badges13 bronze badges

2 Comments

Rory McCrossan Over a year ago

This seems to be half an answer. What about the clicking of the second checkbox in each row?

samnu pel Over a year ago

I mentioned in the answer he has to enable it again on 'onclick' event or in some other process. I'm giving the person hint to how to do it himself. If he still can't figure out the way then we can provide answer.

schylake · Accepted Answer · 2017-08-30 16:50:24Z

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>

Collectives™ on Stack Overflow

Disable HTML inputs based on checkbox input

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related