Question

Not quite sure how to explain this but here goes.

I have a function which hides/shows based on a checkbox:

$(“#checkbox”).change(change_visibility);

  function change_visibility() {
   if ($("#checkbox").is(":checked")) {
       $("#theForm").fadeTo("opacity", "1", function() {
        //End Animation
     });

     } else {
       $("#theForm").fadeTo("opacity", "0.3", function() {
         //End Animation
     });
   }

Problem is that now I have bound this checkbox to a button elsewhere and change() is not behaving as I would expect.

   $("#myButton").click(function(){
      $("#checkbox").attr("checked", true);
   });

Even though the checkbox is changing, as it should, it doesnt seem to be calling the change_visibility() function as it does when I click on it manually.

Any idea why this would be?

Answer 1

Whenever you change the status or value of an input element, the change event is not triggered.

But you can trigger it manually:

$("#checkbox").prop("checked", true).change();