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>