why clicking one checkbox enables a disabled checkbox?

i have a situation. i have a series of checkboxes. on page load, few checkboxes may have been disabled because i make them to be.

these are my checkboxes:

<td>
  <input type="checkbox" class="seats" name="selected[]" value="P22">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="P21">
</td>
<td>
  <input type="checkbox" class="seats" name="selected[]" value="P20">
</td>

here is how i make them disabled:

<script>
    $(function() {
      var reserved = ["P22","P21"];
      var seats = document.getElementsByClassName('seats');
      for (var i = 0; i < seats.length; i++) {
        reserved.map(function(v) {
          if (seats[i].value === v) {
            seats[i].setAttribute("disabled", "true");
          }
        });
      }
    });
</script>

when i click other checkboxes, these disabled checkboxes somehow become enabled. This is not what i need. i need them to stay disabled even when i click other checkboxes.

why does this happen? How do i make them stay disabled?