Vue 用checkbox实现两两组合多选且禁用第三个。

本案例结合vant组件实现。思路是一样的。

关键词：Vue-2，checkbox的disabled属性和change事件，v-if判断

template：

<van-checkbox-group v-model="isChe" @change="checkboxChange()">
          <van-checkbox name="0" :disabled="canChoose1">选项0</van-checkbox>
          <van-checkbox name="1" :disabled="canChoose2">选项1</van-checkbox>
          <van-checkbox name="2" :disabled="canChoose3">选项2</van-checkbox>
</van-checkbox-group>

<div v-if="show1">容器1</div>
<div v-if="show2">容器2</div>
<div v-if="show3">容器3</div>

data：

data(){

　　return{　

　　　　isChe: [],
      　　canChoose1: false,
      　　canChoose2: false,
      　　canChoose3: false,
      　　show1: false,
      　　show2: false,
      　　show3: false,
　　}

}

methods：

checkboxChange() {
      console.log(this.isChe);
      if (this.isChe.indexOf("0") > -1) {
        this.show1 = true;
      } else {
        this.show1 = false;
      }
      if (this.isChe.indexOf("1") > -1) {
        this.canChoose3 = true;
        this.show2 = true;
      } else {
        this.canChoose3 = false;
        this.show2 = false;
      }
      if (this.isChe.indexOf("2") > -1) {
        this.canChoose2 = true;
        this.show3 = true;
      } else {
        this.show3 = false;
        this.canChoose2 = false;
      }
    },