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;
      }
    },