Checkbox related changes not working inside a button

I have the following piece of code and I don’t see it executing when I check or uncheck a checkbox. Any reason what I’m doing wrong here?

Here is the JSFiddle showing the same:

$("#update_counter_checkbox").change(function() {
    if ($(this).prop("checked")) {
      // If the checkbox is checked, disable the button
      alert("Checked");
      console.log("checkbox checked");
      $("#dialog-confirm").dialog("widget").find(".ui-button:contains('Login next suggested value " + additionalValue + "')").button("disable");
    } else {
       alert("Not Checked");
      console.log("checkbox NOT checked");
      // If the checkbox is unchecked, enable the button
      $("#dialog-confirm").dialog("widget").find(".ui-button:contains('Login next suggested value " + additionalValue + "')").button("enable");
    }
  });

You’ve got that code inside the “Login case number of your choice” block, which doesn’t seem right.

1 Like

Yeah, I had to take it out and it is working now. Had to use a boolean value inside the button to figure out the nature of checkbox related operation done from outside.

1 Like

Logically, that’s more accurate.

You can’t really have action checks on two separate items at the same time. So you can do a “checked” query of an element, but you can’t have an eventlistener added inside another one.

2 Likes