How to disable all input when checkbox is checked on load with jquery

Question

I want the input each tr disabled if its checkbox is unchecked - on page load. As I understand, I have to call a function to check if the checkbox was checked. But as my code below, it's not working.

$(function() {
  fn_chkBox('.form-check-input'); //see if checked on load
  function fn_chkBox() {
    if ($(this).is(':checked')) {
      $(this).closest("tr").find("input.form-control").prop("disabled", false);
    } else {
      $(this).closest("tr").find("input.form-control").prop("disabled", true);
    }
  }
});

$(".form-check-input").change(function() {
  if ($(this).is(':checked')) {
    $(this).closest("tr").find("input.form-control").prop("disabled", false);
  } else { //unchecked
    $(this).closest("tr").find("input.form-control").prop("disabled", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Day</th>
    <th>Fish</th>
    <th>Crab</th>
    <th>Shrimp</th>
    <th>Squid</th>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
    <td><input type="text" class="form-control" name="mon[1]" /></td>
    <td><input type="text" class="form-control" name="mon[2]" /></td>
    <td><input type="text" class="form-control" name="mon[3]" /></td>
    <td><input type="text" class="form-control" name="mon[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
    <td><input type="text" class="form-control" name="tue[1]" /></td>
    <td><input type="text" class="form-control" name="tue[2]" /></td>
    <td><input type="text" class="form-control" name="tue[3]" /></td>
    <td><input type="text" class="form-control" name="tue[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
    <td><input type="text" class="form-control" name="wed[1]" /></td>
    <td><input type="text" class="form-control" name="wed[2]" /></td>
    <td><input type="text" class="form-control" name="wed[3]" /></td>
    <td><input type="text" class="form-control" name="wed[4]" /></td>
  </tr>
</table>

I want all the input in each row tr disabled when load if its checkbox is empty.

Spectric · Accepted Answer · 2021-07-24 19:45:30Z

You can use the .form-check-input:not(:checked) selector to select all checkboxes that are not checked.

$(function() {
  $('.form-check-input:not(:checked)').closest("tr").find("input.form-control").prop("disabled", true);
});

$(".form-check-input").change(function() {
  if ($(this).is(':checked')) {
    $(this).closest("tr").find("input.form-control").prop("disabled", false);
  } else { //unchecked
    $(this).closest("tr").find("input.form-control").prop("disabled", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Day</th>
    <th>Fish</th>
    <th>Crab</th>
    <th>Shrimp</th>
    <th>Squid</th>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
    <td><input type="text" class="form-control" name="mon[1]" /></td>
    <td><input type="text" class="form-control" name="mon[2]" /></td>
    <td><input type="text" class="form-control" name="mon[3]" /></td>
    <td><input type="text" class="form-control" name="mon[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
    <td><input type="text" class="form-control" name="tue[1]" /></td>
    <td><input type="text" class="form-control" name="tue[2]" /></td>
    <td><input type="text" class="form-control" name="tue[3]" /></td>
    <td><input type="text" class="form-control" name="tue[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
    <td><input type="text" class="form-control" name="wed[1]" /></td>
    <td><input type="text" class="form-control" name="wed[2]" /></td>
    <td><input type="text" class="form-control" name="wed[3]" /></td>
    <td><input type="text" class="form-control" name="wed[4]" /></td>
  </tr>
</table>

Rory McCrossan · Accepted Answer · 2021-07-24 19:44:49Z

To do what you require you can simply trigger() your change event handler on the checkboxes when the page loads.

Two other things to note here. Firstly, the logic there can be simplified by providing the inverse checked property state to the prop('disabled') call. Secondly, be careful when placing your event handlers outside document.ready. If you've put the jQuery code in the head of the page you encounter issues with the event not being bound.

With all that said, try this:

jQuery($ => {
  $(".form-check-input").on('change', e => {
    $(e.target).closest('tr').find('input.form-control').prop('disabled', !e.target.checked);
  }).trigger('change');
});

.form-control { width: 50px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Day</th>
    <th>Fish</th>
    <th>Crab</th>
    <th>Shrimp</th>
    <th>Squid</th>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
    <td><input type="text" class="form-control" name="mon[1]" /></td>
    <td><input type="text" class="form-control" name="mon[2]" /></td>
    <td><input type="text" class="form-control" name="mon[3]" /></td>
    <td><input type="text" class="form-control" name="mon[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
    <td><input type="text" class="form-control" name="tue[1]" /></td>
    <td><input type="text" class="form-control" name="tue[2]" /></td>
    <td><input type="text" class="form-control" name="tue[3]" /></td>
    <td><input type="text" class="form-control" name="tue[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
    <td><input type="text" class="form-control" name="wed[1]" /></td>
    <td><input type="text" class="form-control" name="wed[2]" /></td>
    <td><input type="text" class="form-control" name="wed[3]" /></td>
    <td><input type="text" class="form-control" name="wed[4]" /></td>
  </tr>
</table>

Kinglish · Accepted Answer · 2021-07-24 19:46:06Z

You can leverage your existing function and just trigger a 'change' event on load. You can also shorten your function by setting disabled to !$(this).is(':checked')

$(function() {
  $('input[type=checkbox]').trigger('change')
});

$(".form-check-input").change(function() {
  $(this).closest("tr").find("input.form-control").prop("disabled", !$(this).is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Day</th>
    <th>Fish</th>
    <th>Crab</th>
    <th>Shrimp</th>
    <th>Squid</th>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
    <td><input type="text" class="form-control" name="mon[1]" /></td>
    <td><input type="text" class="form-control" name="mon[2]" /></td>
    <td><input type="text" class="form-control" name="mon[3]" /></td>
    <td><input type="text" class="form-control" name="mon[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
    <td><input type="text" class="form-control" name="tue[1]" /></td>
    <td><input type="text" class="form-control" name="tue[2]" /></td>
    <td><input type="text" class="form-control" name="tue[3]" /></td>
    <td><input type="text" class="form-control" name="tue[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
    <td><input type="text" class="form-control" name="wed[1]" /></td>
    <td><input type="text" class="form-control" name="wed[2]" /></td>
    <td><input type="text" class="form-control" name="wed[3]" /></td>
    <td><input type="text" class="form-control" name="wed[4]" /></td>
  </tr>
</table>

Collectives™ on Stack Overflow

How to disable all input when checkbox is checked on load with jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related