jquery pause/resume click event

pause checkbox click - run script - resume click event

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input type="checkbox" id="foo"> Clicky!

<hr>

<textarea id="bar"></textarea>

<hr>

<textarea id="cons"></textarea>

<div id="dialog">
  <p>
  A modal opens
  </p>
  <p>
  Then after you close the modal, the click event should resume via $.trigger('click') method.
  </p>
  <p>
  If working correctly, the 2nd text area should populate with the click event listener text.
  </p>
</div>

CSS

.ui-dialog-titlebar-close {
    visibility: hidden;
}

JavaScript

$("#dialog").dialog({
  autoOpen: false
});

$("#foo").on('mousedown', function(e) {
  e.preventDefault(); // stop mousedown propagation
  $("#foo").prop('checked', false).prop("disabled", true); // disable checkbox from checking

  if (!$("#foo").is(":checked")) { // if not checked, run script

    // Open a modal while checkbox event is paused
    $("#dialog").dialog('open').dialog({
      title: "Hey! Here is a modal",
      modal: 'true',
      buttons: {
        "OK": function() {
          // run a script while modal running during checkbox pause
          $("#bar").val("checkbox paused, script run");

          // release checkbox disable  &
          // programmatically complete the check
          $("#foo").prop('disabled', false).trigger('click'); 
          // This click event completes and the click listener fires below in Chrome, but not on firefox? Why oh why?
          
          $("#dialog").dialog('close');
        }
      }
    });
  }
});



$("input:checkbox").on("click", function() {
  $("#cons").val("check completed!");
});