Question

我有一组复选框：

<div class="additions">
  <input type="checkbox" value="10" v-model="additional">
  <input type="checkbox" value="30" v-model="additional">
  <div class="group">
    <input type="checkbox" value="50" v-model="additional">
    <input type="checkbox" value="70" v-model="additional">
  </div>
</div>

我将检查的值收集到数据中

new Vue({
  el: '#app',
  data() {
    return {
      additional: [],
    }
  },
});

无法弄清楚如何防止在.group内的1个复选框我尝试使用收音机，但随后出现了一些奇怪的事情，决定坚持使用复选框。我想我可以在jQuery或什至是香草JS中做到这一点，但我不知道将检查放在哪里（在更改事件方法上？）。在VueJS中最好的方法是什么？

这是我的笔：https://codepen.io/RomkaLTU/pen/LXOJgr?editors=1010

Answer 1

您可以使用不同的方式：

1。 :disabled directive

<input type="checkbox" value="20" v-model="additional" :disabled="condition">

使用additional.length > 0之类的条件，如果已选中多个复选框，则可以禁用该复选框。

2。 Watchers

data() {
  ...
},
watch: {
  additional(newValue, oldValue) {
    // new additional array value will be here every time any checkbox switched
  }
}

Answer 2

不要考虑DOM，不要考虑类。我知道很难改掉。

<input type="checkbox" value="50" v-model="additional" :disabled="hasAdditional">

computed: {
  hasAdditional() {
    return this.additional.length > 0
  }
}

使用它作为您尝试做的入门。可能您必须使用观察程序来检测其何时发生更改，并取消选中不允许的更改。您还可以更改hasAdditional以返回添加数量的总和，如果可以选择该组，则可以使用该数量来工作。

不要依赖CSS类。使用方法，观察者和计算的属性来计算逻辑。

Answer 3

只需创建一个函数即可在每次选择一个选项时清除复选框列表：

    mySubject.wait.subscribe((v)=>{...});

Answer 4

感谢您向我指出，但我选择了解决方案而不禁用输入，因为这会使最终用户感到非常困惑。我做了什么：

<input type="checkbox" value="30" v-model="additional">
<input type="checkbox" value="40" v-model="additional">
<input type="checkbox" value="10" v-model="additional_grouped" @change="uniqueCheck">
<input type="checkbox" value="20" v-model="additional_grouped" @change="uniqueCheck">


new Vue({
  el: '#app',
  data() {
    return {
      additional: [],
      additional_grouped: [],
    }
  },
  computed: {
    final: function(){
      return this.additional.concat(this.additional_grouped);
    }
  },
  methods: {
    uniqueCheck(e){
      this.additional_grouped = [];
      if (e.target.checked) {
          this.additional_grouped.push(e.target.value);
      }
    }
  }
});

VueJS仅允许基于类名称选择1个复选框

4 个答案: