How to disable onclick in JavaScript?

I have been trying to do something like this.

I have a working code, (this is just example), when I click on the button the game starts.

In this example I have a loop, that if condition is true, I want to disable the option to click on the button.

I have seen that this el.disabled = true; / e.disabled = true; / td.disabled = true; (Is it possible to disable onclick without altering its function?) should do the job, but this doesn’t work for me. Why is that? Or maybe there is another way to do that? (this is not the whole code, only the important parts)

<!DOCTYPE html>
<html>
<head></head>
<body>
  <script type="text/javascript">
    function startgame() {
      var ChessTable;
      var counter = 0;
      var center = document.createElement('center');
      ChessTable = document.createElement('table');

      for (var i = 0; i < 8; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < 8; j++) {
          var td = document.createElement('td');
          td.setAttribute('id', counter)
          td.addEventListener('click', s)
        }
        ChessTable.appendChild(tr);
      }
      center.appendChild(ChessTable);
      ChessTable.setAttribute('cellspacing', '0');
      ChessTable.setAttribute('width', '270px');
      document.body.appendChild(center);
    }

    var counterforplayer = 0;

    function s(e) {
      event.target.style.backgroundColor = "green";

      if (counterforplayer >= 5) {
        alert("you cannot play anymore")
        e.disabled = true;
        counterforplayer++;
      }
    }
    }
  </script>
  <button onclick="startgame()">Click me to start a new game</button>
  <div id="container">
    <div id="ph1">
    </div>
  </div>
</body>
</html>