How to call a function from the onclick or onchange flag

Question

I have a form in which I want to disable or hide two input fields by checking the box. I can easily do this when on document.ready, but since I am adding these fields, the function does not take effect. How to call a function using onClick?

Here is 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 uses. add to create multiple instances of the above code. Since the number of append is unlimited, I cannot check the box with $('#id') , because there can be hundreds such as $('#id1') , $('#id2') .. etc. I need a function that avoids mentioning the exact identifiers of the elements, called the onClick flag and affects the div until the div heading is added as well .

Answer 1

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 elements do not exist during document preparation, use .on , for example:

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

jQuery.on documentation

Answer 3

Do not use the onclick attribute. What your code does is attach a new onclick handler after the user clicks. Perhaps this is not what you want.

You should also use prop instead of attr to change disabled .

Since the element you want to attach to the event may not exist on the finished document, attach it to the nearest ancestor, which will undoubtedly 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" />