How to make a checkbox option disabled once only a single checkbox is checked?

[jithinb68]

Problem:

I have 2 checkbox - consider option A and option B

At least one of them should be checked, so if any of the one is unchecked the other should be disabled. If both of them is checked, both should not be disabled. In short they must not be a case where both can be unchecked.

I'm using vue-bootstrap checkbox component, which has a disabled property, but I cannot make it dynamic according to my condition. Here is the code:

<b-form-checkbox-group v-model="selectedFruit" @change="changeFruits"> <b-form-checkbox v-for="fruit in availableFruits" :key="fruit.id" :value="fruit.name" :disabled="checkifDisabled"> {{ fruit.name }} </b-form-checkbox> </b-form-checkbox-group>

I'm trying to use the vue computed property to do this, but not getting exactly what to target inside the computed property.

data() { return { selectedFruit: [], availableFruits: [ { id: 1, name: 'Apple' }, { id: 2, name: 'Mango' } ], } },

[Hiws]

You can bind a method to disabled, which checks whether the checkbox should be disabled or not. In your case you want to check if there's only one item in the selected array, and disable the checkbox which value is in the array.

<div id="app" class="p-2">
  <b-form-checkbox-group v-model="selectedFruit">
    <b-form-checkbox v-for="fruit in availableFruits" :key="fruit.id" :value="fruit.name" :disabled="isDisabled(fruit)">
      {{ fruit.name }}
    </b-form-checkbox>
  </b-form-checkbox-group>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      selectedFruit: [],
      availableFruits: [{
          id: 1,
          name: 'Banana'
        },
        {
          id: 2,
          name: 'Strawberry'
        },
        {
          id: 3,
          name: 'Cherry'
        },
        {
          id: 4,
          name: 'Apple'
        }
      ]
    }
  },
  methods: {
    isDisabled(fruit) {
      const {
        selectedFruit
      } = this
      return selectedFruit.length === 1 && selectedFruit[0] === fruit.name
    }
  }
})
</script>