Vuetifyのチェックボックスにおいて、:disabledの条件を＆＆を使用して複数指定したい。

Question

Vue.jsのフレームワークであるVuetify.jsを使用して、下記のようなチェックボックスが並んだ画面を作成しました。

最初のチェックボックスである"CheckBoxA"にチェックが付くと、"CheckBoxB"の選択が可能となります。
"CheckBoxB"にチェックを入れると、"CheckBoxC"が選択可能となるような、
コードを作成したのですが、現状、"CheckBoxA"をクリックすると"CheckBoxC"までの全てのdisabledが外れて選択可能となってしまいます。
私が作成したコードは下記となります。

<template>
  <v-card>
    <v-card-text>
      <v-container>
        <v-row>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox A:${checkboxA}`"
              v-model="checkboxA"
            ></v-checkbox>
          </v-col>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox B:${checkboxB}`"
              v-model="checkboxB"
              :disabled="!checkboxA"
            ></v-checkbox>
          </v-col>
          <v-col cols="4">
            <v-checkbox
              :label="`Checkbox C:${checkboxC}`"
              :disabled="!checkboxA && !checkboxB"
            ></v-checkbox>
          </v-col>
        </v-row>
      </v-container>
    </v-card-text>
  </v-card>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class extends Vue {
  checkboxA: boolean = false
  checkboxB: boolean = false
  checkboxC: boolean = false
}
</script>

コード中のcheckboxCにあたる部分の:disabledにあたる部分のコードでうまくいくのではないかと思ったのですが、期待していた動作は
得られませんでした。
どなたかご教示いただけませんでしょうか？

Answer 1

checkboxA または checkboxB にチェックが付いていない場合はdisabledとのことなので、次の条件になるかと思います。

<v-checkbox
  :label="`Checkbox C:${checkboxC}`"
  :disabled="!checkboxA || !checkboxB"
></v-checkbox>

Comments

[takochan1192]

ありがとうございました！