简体   繁体   中英

In Vuetify, how to prevent a checked v-checkbox from being deselected?

I have a checkbox:

<v-checkbox
     v-for="company in allCompanies" :key="`company_${company.id}`"
     :label="company.name"
     :value="company.id"
     v-model="selectedCompanies"
/>

How could I prevent a selected box from being deselected without having to resort to using radio buttons?

Or how to, using Javascript, check whether a specific checkbox has been deselected?

Here is the working codepen https://codepen.io/manojkmishra/pen/dyYERzX

Template part:

<div id="app">
 <v-app id="inspire">
   <v-container fluid>
     <v-layout row wrap>
       <v-flex xs12 md6>
         <v-subheader>Checkbox</v-subheader>
          <v-card flat>
           <v-card-text>
             <v-checkbox :disabled="disabled" v-bind:label="`Checkbox 1:    ${ex1.toString()}`" v-model="ex1" light @ @change="hehe"></v-checkbox>             
              </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Script part:

new Vue({
el: '#app',
data () {
return {
  ex1: false,
  disabled:false,
}
  },
 methods:{
hehe(){
  console.log("hehe")
this.disabled=true;
    }
  }
})

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM