限制复选框选中的计数为5

<input type="checkbox" id="checkbox1" onclick="updateCount()" />
<input type="checkbox" id="checkbox2" onclick="updateCount()" />
<input type="checkbox" id="checkbox3" onclick="updateCount()" />
<input type="checkbox" id="checkbox4" onclick="updateCount()" />
<input type="checkbox" id="checkbox5" onclick="updateCount()" />

<script>
  var count = 0;

  function updateCount() {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    count = 0;

    checkboxes.forEach(function (checkbox) {
      if (checkbox.checked) {
        count++;
      }
    });

    if (count >= 5) {
      checkboxes.forEach(function (checkbox) {
        if (!checkbox.checked) {
          checkbox.disabled = true;
        }
      });
    } else {
      checkboxes.forEach(function (checkbox) {
        checkbox.disabled = false;
      });
    }
  }
</script>

<template>
  <div>
    <input type="checkbox" v-model="checkbox1" @change="updateCount" />
    <input type="checkbox" v-model="checkbox2" @change="updateCount" />
    <input type="checkbox" v-model="checkbox3" @change="updateCount" />
    <input type="checkbox" v-model="checkbox4" @change="updateCount" />
    <input type="checkbox" v-model="checkbox5" @change="updateCount" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkbox1: false,
      checkbox2: false,
      checkbox3: false,
      checkbox4: false,
      checkbox5: false,
    };
  },
  methods: {
    updateCount() {
      var count = 0;

      if (this.checkbox1) count++;
      if (this.checkbox2) count++;
      if (this.checkbox3) count++;
      if (this.checkbox4) count++;
      if (this.checkbox5) count++;

      if (count >= 5) {
        this.checkbox1 = this.checkbox1 ? true : false;
        this.checkbox2 = this.checkbox2 ? true : false;
        this.checkbox3 = this.checkbox3 ? true : false;
        this.checkbox4 = this.checkbox4 ? true : false;
        this.checkbox5 = this.checkbox5 ? true : false;
      }
    },
  },
};
</script>