I have two checkboxes, 'Show Active' and 'Show Live' Initially 'Show Live' is disabled.

I want the functionality where on checking 'Show Active', 'Show Live' is enabled, and on unchecking 'Show Active', 'Show Live' gets unchecked and disabled.

Here is the code:

<div id="q-app">
<q-checkbox left-label v-model="searchForm.active" label="Show Active"></q-checkbox>
  <q-checkbox left-label v-model="searchForm.live" label="Show Live"></q-checkbox>
</div>

<script>
const {
  useQuasar
} = Quasar
const {
  ref,
  onMounted,
  reactive
} = Vue

const app = Vue.createApp({
  setup() {
    const $q = useQuasar()

    const searchForm = reactive({
      active: false,
      live: false
    });

    function notify() {
      $q.notify('Running on Quasar v'   $q.version)
    }

   

    return {
      notify,
      searchForm
    }
  }
})

app.use(Quasar, {
  config: {}
})
app.mount('#q-app')

</script>

https://jsfiddle.net/ubjsf2zv/10/

I'm new to vue.js and quasar framework

CodePudding user response：

The solution is to use the props disable with a condition.

I create a example on https://jsfiddle.net/jLxg3q7m/

We juste have to do this:

<q-checkbox :disable="searchForm.active === false && (searchForm.live = false)" left-label v-model="searchForm.live" label="Show Live"></q-checkbox>

I add this :disable="searchForm.active === false && (searchForm.live = false)":

• The first condition searchForm.active === false will disable him, if the active is false.
• The second part (searchForm.live = false) will assign live to the value false.