0
271
VistasCasillas de verificación de Vue: manténgalo seleccionado a menos que se marque otra casilla de verificación
Estoy usando casillas de verificación para que se comporten como botones de radio, pero el único comportamiento que quiero corregir es la capacidad de mantener la casilla de verificación marcada hasta que se marque la segunda (que luego desmarcará la primera). No quiero la posibilidad de anular la selección de la casilla de verificación haciendo clic en ella nuevamente, solo para presionar la casilla de verificación "ninguno" para anular la selección de la siguiente.
Haciendo referencia a la imagen de arriba, la etiqueta también selecciona la casilla de verificación. Una vez que se selecciona la casilla de verificación y se toca nuevamente, vuelve a la casilla de verificación ninguno a la izquierda. Tal vez los botones de radio serían mejores, pero me gustan más las casillas de verificación. Aquí está el código:
<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>2 Respuestas
Responde la pregunta0
Para hacer esto, solo necesitas tener dos v-models, uno para cada botón, y crear una función que cuando uno de los dos botones cambie, cada uno de los valores tome su valor opuesto.
Luego, para evitar la anulación de la selección al hacer clic en su propio botón, use :disabled= con la referencia de su botón
Vue.js 3 con Composición
<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>0
Puede usar el watch para verificar si el valor de la casilla de verificación ha cambiado y luego seleccionar todo o anular la selección de todo, según eso.
Aquí hay una demostración rápida
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>