Vue 复选框 - 除非选中另一个复选框，否则保持选中状态

Question

我正在使用复选框来表现得像单选按钮，但我想要修复的一个行为是能够保持复选框处于选中状态，直到选中第二个复选框（然后取消选中第一个）。 我不希望能够通过再次单击来取消选择复选框，只需点击“无”复选框即可取消选择下面的复选框。

参考上图，label 也选中了复选框。 选中复选框并再次点击后，它会返回到左侧的无复选框。 也许单选按钮会更好，但我更喜欢复选框。 这是代码：

 <label:for="'none-'+product.id" class="none addon_label":class="{'addon_selected': :selected}" > <input class="" type="checkbox".id="'none-'+product:id":true-value="false":false-value="true":value="false" v-model="selected" checked /> <span class="checkmark addon_checkbox"></span> <div class="v-center">None</div> </label> <label.for="'product-'+product:id" class="is_flex addon_label":class="{'addon_selected': selected}".data-product-id="product:id" > <div class="checkbox-container"> <input class="" type="checkbox":true-value="true":false-value="false".id="'product-'+product.id" v-model="selected"/> <span class="checkmark addon_checkbox"></span>

Answer 1

为此，您只需要有两个 v-model，每个按钮一个，并创建一个 function，当两个按钮之一发生变化时，每个值都取其相反的值。

然后，为了避免通过单击自己的按钮取消选择，您使用:disabled=并参考您的按钮

Vue.js 3 与组成

<script setup lang="ts">
import { ref } from "vue";

let selectedNone = ref(true);
let selectedChoice = ref(false);

function selectOption() {
  selectedNone.value = !selectedNone;
  selectedChoice.value = !selectedChoice;
}
</script>

<template>
  <label>
    <input
      type="checkbox"
      :value="false"
      v-model="selectedNone"
      :disabled="selectedNone"
      @click="selectOption"
    />
    <span>None</span>
  </label>

  <label >
      <input
        type="checkbox"
        v-model="selectedChoice"
        :disabled="selectedChoice"
        @click="selectOption"
      />
      <span>Choice</span>
  </label>
</template>

Answer 2

您可以使用watch检查复选框的值是否已更改，然后根据此更改 select 全部或取消全选。

这是一个快速演示

 Vue.config.devtools = false; Vue.config.productionTip = false; new Vue({ el: '#app', data: () => { return { options: { check1: null, check2: null, check3: null, }, check1: null, check2: null, check3: null, deselect: null, }; }, watch: { deselect(isDeselected) { if (isDeselected) { this.options.check1 = false; this.options.check2 = false; this.options.check3 = false; } }, options() { console.log("Change"); }, ...["options.check1", "options.check2", "options.check3"].reduce(function ( acc, currentKey ) { acc[currentKey] = function (newValue) { if (newValue) this.deselect = false; }; return acc; }, {}), }, })

 <script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <div id="app"> <label for="check1">Check 1</label> <input type="checkbox" v-model="options.check1" id="check1" /> <br /> <label for="check2">Check 2</label> <input type="checkbox" v-model="options.check2" id="check2" /> <br /> <label for="check3">Check 3</label> <input type="checkbox" v-model="options.check3" id="check3" /> <br /> <label for="deselect-check">Deselect All</label> <input type="checkbox" v-model="deselect" id="deselect-check" /> </div>