Prevent input checkbox from toggling

I have a checkbox <input> tag inside of a <summary> inside of a <details>, which to my dismay toggles the openness of the <details> when it is toggled, not unlike this question concerning spacebar toggling details tags, but unfortunately can't be fixed by the same means.

See below snippet:

$('input').change(function(e) {
  e.stopPropagation();
  e.preventDefault();
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details>
  <summary>
    <input type="checkbox">
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>

How do I prevent the <details> getting opened/closed by checking or unchecking the checkbox? (Other than the obvious answer of moving the <input> tag outside the <summary>. I am curious as to why this happens)