質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

5280閲覧

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

takochan1192

総合スコア100

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/11/02 02:55

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

img

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

Vue

1<template> 2 <v-card> 3 <v-card-text> 4 <v-container> 5 <v-row> 6 <v-col cols="4"> 7 <v-checkbox 8 :label="`Checkbox A:${checkboxA}`" 9 v-model="checkboxA" 10 ></v-checkbox> 11 </v-col> 12 <v-col cols="4"> 13 <v-checkbox 14 :label="`Checkbox B:${checkboxB}`" 15 v-model="checkboxB" 16 :disabled="!checkboxA" 17 ></v-checkbox> 18 </v-col> 19 <v-col cols="4"> 20 <v-checkbox 21 :label="`Checkbox C:${checkboxC}`" 22 :disabled="!checkboxA && !checkboxB" 23 ></v-checkbox> 24 </v-col> 25 </v-row> 26 </v-container> 27 </v-card-text> 28 </v-card> 29</template> 30<script lang="ts"> 31import { Component, Vue } from 'nuxt-property-decorator' 32 33@Component({}) 34export default class extends Vue { 35 checkboxA: boolean = false 36 checkboxB: boolean = false 37 checkboxC: boolean = false 38} 39</script>

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

html

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

投稿2020/11/02 16:19

DaikiOjima

総合スコア271

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takochan1192

2020/11/02 22:19

ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問