vue: react-like controlled checkbox?

Question

in React, we can have a controlled checkbox like this

<input type="checkbox" checked={true} />

and this will keep the checkbox always checked, even the users click it

but in Vue, after binding a true value for checked

<input type="checkbox" :checked="true" />

it's initially checked, but the users can still click to change it.

how to prevent this behavior in Vue?

update:

what I'm really trying to implement is

a checkbox can click to uncheck
but can not click to check, to only way to make it checked is by changing the <select /> next to it
uncheck the checkbox will clear <select />

my current implementation: https://codesandbox.io/s/goofy-mcnulty-seh6w?file=/src/App.vue

using key and @click.prevent kind of does not fit my head.

score 0 · Answer 1 · edited Jul 16 '22 at 05:27

I've come up with following solution for your problem. Lets go step by step and explain how it works.

We set the input element's checked property to be a local boolean value (checkboxChecked). Also we want it to be automatically changed once the checkbox is clicked, which is why we also add this checkboxChecked boolean as v-model attribute.

We prevent the user from checking it again by setting the disabled attribute of the input element to be true if the checkbox is not checked (checkboxChecked = false).

On the select element we listen for the @change event (See this question on the change event) and run the onSelectChange method. This method then sets the checkboxChecked boolean back to true, enabling the user to uncheck the checkbox again.

Furthermore, we add a ref attribute to the first option (The one we want to select if the checkbox gets unchecked).

Lastly we add a watcher (Check out the docs on value watchers) to the checkboxChecked attribute. If the checkbox is now clicked the if statement in our watcher function selects the first option using the ref attribute if the checkboxChecked value is false.

Edit

What I forgot to mention is, that you would also have to check if the user actually selects an other option than empty (I've done this by comparing the event.target.value to an empty string). I've added this to the code now.

Also a client still could go ahead and manually set the disabled attribute with his webbrowsers html editor to false.

<template>
  <div id="app">
    <input
      type="checkbox"
      :checked="checkboxChecked"
      :disabled="!checkboxChecked"
      v-model="checkboxChecked"
    />

    <select style="width: 5em" @change="onSelectChange($event)">
      <option ref="emptySelectOption" value="">empty</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      checkboxChecked: true,
    };
  },
  methods: {
    onSelectChange(event) {
        if (event.target.value !== "") this.checkboxChecked = true;
    },
  },
  watch: {
    checkboxChecked(value) {
      if (!value) this.$refs.emptySelectOption.selected = true;
    },
  },
};
</script>

vue: react-like controlled checkbox?

1 Answers1