How to enable clicks on element under $('#parent').click(false)?

Question

I am having a popup window which I want to be able to close by clicking next to it, but obviously not on it. I therefore have code like this:

$('#popupWindow').click(false);
$('#overlayBackground').click(function(){
  $(this).css('display', 'none');
});

#overlayBackground{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
#popupWindow{
  width: 25%;
  height: 25%;
  margin: auto;
  transform: translateY(50px);
  text-align: center;
  background-color: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="overlayBackground">
  <div id="popupWindow">MyPopup</div>
</div>

This make all clicks on the background close the popup but no clicks on the popup itself close it. However, now I have a checkbox on the popup window like below:

$('#popupWindow').click(false);
$('#overlayBackground').click(function(){
  $(this).css('display', 'none');
});

#overlayBackground{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
#popupWindow{
  width: 25%;
  height: 25%;
  margin: auto;
  transform: translateY(50px);
  text-align: center;
  background-color: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="overlayBackground">
  <div id="popupWindow">
    <input type="checkbox">
  </div>
</div>

This checkbox won't accept clicks due to the code $('#popupWindow').click(false);.

What I tried

I tried adding some jQuery to check the box but this code doesn't change the checkbox value either, no matter if I put it first or last in the JS document:

$('#myCheckbox').click(function(){
    $(this).prop('checked', !$(this).prop('checked'));
});

Questions

1. How do I make the checkbox clickable?
2. Is there a better way to close the popup when clicking outside of it than what I have done which would allow me to click checkboxes inside the popup?