How to call a function from checkbox onclick or onchange

Question

I have a form in which i want to disable or hide two input fields by selecting a checkbox. I can easily do it when on document.ready, but since i am appending those fields the function does not take effect. How do i call the function with onClick?

Here's my working code

$(function() {
  $(checkbox).click(function() {
    if ($('#checkbox').is(':checked')) {
      $('#appTimes').find('input').attr('disabled', true);
    } else {
      $('#appTimes').find('input').removeAttr('disabled');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" type="checkbox" id="checkbox" />

And this is what i am trying to do:

function boxDisable(e) {
  $(this).click(function() {
    if ($(this).is(':checked')) {
      $(e).find('input').attr('disabled', true);
    } else {
      $(e).find('input').removeAttr('disabled');
    }
  });
}

<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" onclick="boxdisable(appTimes);" type="checkbox" id="checkbox" />

---EDIT--------------- Let me redefine: My code is using .append to create multiple instances of the above code. Since the amount of append is unlimited i am unable to define the checkbox with $('#id'), because there might be hundreds of them like $('#id1'), $('#id2').. etc. I need a function that avoids mentioning the exact element id's, is called onClick by the checkbox and affecting beforehead div, which is also appended.

Answer 1

It works :)

function boxDisable(e, t) {
    if (t.is(':checked')) {
      $(e).find('input').attr('disabled', true);
    } else {
      $(e).find('input').removeAttr('disabled');
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" onclick="boxDisable(appTimes, $(this));" type="checkbox" id="checkbox" />

Answer 2

If the elements do not exist at the time of doc ready, use .on, like so:

$(document).ready(function(){
    $(document).on('change', 'input[type="checkbox"]', function(e){
        //do your stuff here
    });

});

jQuery .on documentation

Answer 3

Don't use the onclick attribute. What your code is doing is attaching a new onclick handler after the user clicks. That's probably not what you want.

You should also use prop instead of attr for changing disabled.

Since the element you want to attach your event to may not exist on document ready, attach it to the nearest ancestor that you're sure will be there.

$( function() { // wait for document ready
  $( '#parent-div' ).on( 'click', ':checkbox', function( e ) { // attach click event
      $( '#appTimes' ).find(':text').prop( 'disabled', $(e.currentTarget).is(':checked') ); // set disabled prop equal to checked property of checkbox
  } );
} );

Answer 4

$(function() {
  $(checkbox).click(function() {
    if ($('#checkbox').is(':checked')) {
      $('#appTimes').find('input').attr('disabled', true);
    } else {
      $('#appTimes').find('input').removeAttr('disabled');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" type="checkbox" id="checkbox" />