Vue框架下，表单存在多个复选框时，如何选中一个同时禁用其它复选框

如标题所示，我们怎样实现下面的需求呢？

当我们选中其中一个选项时，其它的选项应该被禁用，因为我们只想提交一组数据。怎样使用 Vue.js 来实现呢?

首先我们看，如果是一个checkbox，<input type="checkbox" :disable="true">,这样就可以将其禁用。所以当有多个input 存在时，我们需要的是理清逻辑关系，让disable在何时的情况发挥作用。

禁用：（disable='true'）:当有一个选项被选了且不是备选项时

不禁用：（disable='false'）:当是选择的项时

理清了上述逻辑，转化成代码就一行(红笔已经标注)

<div class="activity-list" v-for="(activity,activityIndex) in existedTabSearchResults">
                  <ul class="basic-info clear-float-ml">
                    <li>
                      <input type="checkbox"
                             :disabled="chooseIndex!=activityIndex&&chooseIndex!='reset'"
                             @click="chooseActivity(activityIndex)"/>
                    </li>
                </ul>   ...

在vue实例中，有一个activityIndex ,与 chooseIndex,其中   activityIndex 是第一个活动的index，而chooseIndex的选择，则比较巧妙。初始将其设置为'reset',这个状态表明没有一个选项被选择。就是活动列表的初始状态。当选择活动时，则将chooseIndex置为这个活动的index 。当再一次点击该活动，即活动被取消，chooseIndex被置为 'reset' 。

vue实例部分的代码为：

 var vm=new Vue({
      el:'#management',
      data:{
        chooseIndex:'reset',
            },
      methods:{

var vm=new Vue({
      el:'#management',
      data:{
        chooseIndex:'reset',
        },
      methods:{   
        chooseActivity:function(index){
          if(this.chooseIndex==index){
            this.chooseIndex='reset';
          }else{
          this.chooseIndex=index;
          }
        },

... },

无论采取什么逻辑最终实现，都应理清逻辑关系。