最近项目需要一个动态禁用el-checkbox选项的功能，已经被选择过的项需要在“批量新增”的弹窗中禁用（禁用掉已经在列表中的“西安工厂”）

image.png

Element中只提供了

<el-checkbox-group v-model="checkboxGroup3" size="small">
  <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>

这里使用ES6的语法includes()，把已选择的列表id放入数组disabledStores中，其中store是为el-checkbox绑定数据的storeOptions中的值，store.id是数组中值的id，代码如下：

:disabled="disabledStores.includes(store.id)"

完整代码如下：

<el-checkbox-group v-model="checkedStores" @change="checkedStoresChange">
    <el-checkbox  v-for="store in storeOptions"  :label="store" :key="store.id" :disabled="disabledStores.includes(store.id)" >{{store.name}}</el-checkbox>
</el-checkbox-group>

就这样，可以把已经添加到列表的值id，push进数组disabledStores中，动态禁用批量操作中checkbox多选框，防止数据被覆盖！

（注释：在ES5，Array已经提供了indexOf用来查找某个元素的位置，如果不存在就返回-1，但是这个函数在判断数组是否包含某个元素时有两个小不足，第一个是它会返回-1和元素的位置来表示是否包含，在定位方面是没问题，就是不够语义化。另一个问题是不能判断是否有NaN的元素。）