[英]Vue Checkboxes - Keep selected unless another checkbox is checked
I am using checkboxes to behave like radio buttons but the one behavior that I want to fix is the ability to keep the checkbox checked until the second one is checked (which will then uncheck the first one).我正在使用复选框来表现得像单选按钮,但我想要修复的一个行为是能够保持复选框处于选中状态,直到选中第二个复选框(然后取消选中第一个)。 I don't want the ability to deselect the checkbox by clicking on it again, just to hit the "none" checkbox to deselect the one below.
我不希望能够通过再次单击来取消选择复选框,只需点击“无”复选框即可取消选择下面的复选框。
Referring to the image above, the label selects the checkbox as well.参考上图,label 也选中了复选框。 Once the checkbox is selected and is tapped on again, it goes back to the none checkbox on the left.
选中复选框并再次点击后,它会返回到左侧的无复选框。 Maybe radio buttons would be better, but I like checkboxes more.
也许单选按钮会更好,但我更喜欢复选框。 Here's the code:
这是代码:
<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>
To do this, you just need to have two v-models, one for each button, and to create a function that when one of the two buttons changes, each of the values takes its opposite value.为此,您只需要有两个 v-model,每个按钮一个,并创建一个 function,当两个按钮之一发生变化时,每个值都取其相反的值。
Then, in order to avoid deselection by clicking on its own button, you use :disabled=
with the reference of your button然后,为了避免通过单击自己的按钮取消选择,您使用
:disabled=
并参考您的按钮
Vue.js 3 with Composition 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>
You can use watch
to check if the value of the checkbox has changed, and then either select all or deselect all, based on that.您可以使用
watch
检查复选框的值是否已更改,然后根据此更改 select 全部或取消全选。
Here's a quick demo这是一个快速演示
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.