无法在单击时禁用按钮

<button onclick="disableButton()">点击按钮</button>

<script>
function disableButton() {
  var button = document.querySelector('button');
  button.disabled = true;
}
</script>

<button id="myButton">点击按钮</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#myButton').click(function() {
  $(this).prop('disabled', true);
});
</script>

<style>
.disabled-button {
  pointer-events: none;
  opacity: 0.5;
}
</style>

<button onclick="disableButton()">点击按钮</button>

<script>
function disableButton() {
  var button = document.querySelector('button');
  button.classList.add('disabled-button');
}
</script>