JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding: 10px;">
    
  <a href="JavaScript: openDialog(1000000,true);">Dialog Test 1</a>
  (zIndex: 1000000, modal: true)<br />
    
  <a href="JavaScript: openDialog(999999,true);">Dialog Test 2</a>
  (zIndex: 999999, modal: true)<br />
    
  <a href="JavaScript: openDialog(1000000,false);">Dialog Test 3</a>
  (zIndex: 1000000, modal: false)

</div>
<div id="myDialog" style="display: none;" title="Checkbox Testing">
    <form name="myForm" id="myForm" method="post" action="#">
    <input type="checkbox" name="myCheckboxes" id="myCheckboxes_on" value="initially checked" /> initially checked<br />
    <input type="checkbox" name="myCheckboxes" id="myCheckboxes_off" value="initially unchecked" /> initially unchecked
    </form>
</div>

CSS

body, div {
  font-family: sans-serif;
  font-size: 13px;
  line-height: 20px;
}

JavaScript

$(function() {

  $("#myDialog").dialog({ autoOpen: false });
            
  $("#myForm input[name='myCheckboxes']").click(function() {
     alert("CLICK handler\nvalue = " + this.value + "\nthis.checked = " + this.checked);
  });
            
  $("#myForm input[name='myCheckboxes']").change(function() {
     alert("CHANGE handler\nvalue = " + this.value + "\nthis.checked = " + this.checked);
  });

});

function openDialog(zval,mflg) {
  $("#myCheckboxes_on").prop("checked", true);
  $("#myCheckboxes_off").prop("checked", false);
  $("#myDialog").dialog("option", { modal: mflg, zIndex: zval });
  $("#myDialog").dialog("open");
}