在 Vue 中，如何根据复选框的值将复选框设置为禁用？答案

【问题标题】：In Vue how can I set checkboxes to be disabled depending on its value?在 Vue 中，如何根据复选框的值将复选框设置为禁用？
【发布时间】：2020-06-25 09:07:53
【问题描述】：

我正在遍历复选框以构建一个座位选择器，其值从 A1 到 A10。我在 data 属性中还有一个数组，定义了我想设置为禁用的值。如果此数组中的值等于复选框的值，则应禁用它。我似乎只能在选中复选框后访问它的值。如何获取每个复选框的值？

<span class="seat" v-for="n in 10" :key="n">
  <label class="checkbox-label">
    <input
    class="checkbox-input"
      type="checkbox"
      v-model="selected"
      :value="'A' + n"
      @change="check($event)"
      :disabled="isDisabled" 
      true-value="1" false-value="0"
      number> {{ n }} 
      <span class="checkmark"></span>
  </label>
</span>

data() {
  return {
    selected: [],
    disabled: ['A1', 'A2', 'A9']
  }
},
computed: {
  isDisabled() {
    // limit seats picked to number of tickets chosen
    if (this.selected.length > (this.totalTickets - 1)) {
      return true
    } else {
      return false
    }
  },
},
mounted: function() {
  //disable checkboxes here?
},

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component v-model

【解决方案1】：

尝试访问$event目标值并检查它是否包含在disabled数组中：

 :disabled="disabled.includes($event.target.value)"

或以n 为参数添加方法：

 :disabled="disable(n)"

在方法中：

computed:{
 ....
},
methods:{
  disable(n){
   return this.disabled.includes('A'+n);
}
}

【讨论】：