Top > JavaScript関連 > checkboxにcheckを入れたら入力可能になるテキストフィールド3つ[Vue3, Vuetify, VanillaJSそれぞれによる方法]

checkboxにcheckを入れたら入力可能になるテキストフィールド3つ[Vue3, Vuetify, VanillaJSそれぞれによる方法]

checkboxにcheckを入れたら入力可能になるテキストフィールド3つ[Vue3, Vuetify, VanillaJSそれぞれによる方法]
この記事をシェアする：
以前の記事で「チェックボックスにチェックを入れたら、有効になるボタン」に関する内容をご紹介しました。
対象記事：チェックを入れる、テキストを入力など条件を満たしたら押せるボタンを作る方法

上記の記事は、Vue.js2系統、Vuetify2系統についての内容でしたが
今回は、その方法の「Vue.js3版」です。そして後半ではVue.jsに頼らず、素のJavaScriptで実現する方法もご紹介します。

具体的には、

・Vuetify3での方法
・Vuetifyに頼らずVue.js3で実現する方法
・VuetifyもVue.js自体も使わずに同じことをする方法

↑これら3つの方法について書いていきます。
※また今回はボタンではなく
「チェックボックスにチェックを入れたら、入力可能になるテキストフィールド」を題材に、
それを作る方法について書いていきます。

なお、この記事を書いた際の環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( おすすめは v16.10 以降 )を使用することをお勧めします。

[Vuetify3編]checkboxにcheckを入れたら入力可能になるテキストフィールド

では早速、「checkboxにcheckを入れたら入力可能になるテキストフィールド」の作り方、Vuetify3編です。

このセクションは、Vuetify3のインストールが既に済んでいる前提です。
Vuetify3の導入についてはこちらの記事をご覧ください。

それではまずはhtml構造から書いていきます。

  <div id="app">
    <v-container>
      <h2>checkboxを使用して同意したら入力可能になるテキストフィールドの例</h2>
      <p class="pt-5">チェックを入れると入力可能です。</p>
      <div class="d-flex align-center py-5">
        <v-checkbox-btn
          v-model="isChecked.checked"
          class="pe-2"
        ></v-checkbox-btn>
        <v-text-field
          :disabled="!isChecked.checked"
          hide-details
          label="メッセージを入力"
        ></v-text-field>
      </div>
    </v-container>
  </div>

↑Vuetifyを使用した事がある方ならおなじみ、
v-checkbox と v-text-field が左右に並ぶ形です。
上記の様に checkbox 側、テキストフィールド側双方で、同じデータ変数を
v-model として紐づける事で、
「そのデータ変数の値が true の場合(チェックが入った場合)」に
「テキストフィールド側の disabled の条件も更新される」ため、
結果的に「checkboxにcheckを入れたら入力可能になるテキストフィールド」が実現できるという事です。
なお Vuetify3公式ページ によると、上記の様に
何らかのコンポーネントに添える形で v-checkbox を配置する場合は v-checkbox-btn の使用が推奨されています。

続いてJavaScript部分です。

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const isChecked = reactive({
        checked: false
      })
      return {
        isChecked
      }
    }
  }
</script>

↑とても簡潔です。上の html の部分で書いた通り
checkbox とテキストフィールドを連動させるには、同じデータ変数を v-model で紐付けてあげれば良いので
そのためのデータ変数を setup 関数内に用意しておくだけです。

[Vue.js3編]checkboxにcheckを入れたら入力可能になるテキストフィールド

上のセクションでは、Vuetify3を使った「checkboxにcheckを入れたら入力可能になるテキストフィールド」の作り方についてご紹介しました。
続いては、Vuetify3 を使わずに Vue.js3 で同じことを実現する方法です。
まずはhtmlから書いていきます。

<div>
  <input type="checkbox" v-model="isCheckedPlain.checked" />
  <input type="text"
    :disabled="isCheckedPlain.checked ? false : true"
    style="border: 1px solid #e1e1e1;"
  />
</div>

↑この様に、シンプルにcheckboxとテキストフィールドが並んでいるとします。
Vuetifyで実現する場合には、同じデータ変数を v-model で紐づければ良かったわけですが、
Vue.js3単体で実現する場合でも、大体似た様な仕組みで実現できます。
異なるのは、「テキストフィールド側の属性の更新の仕方」です。

2行目でcheckbox側にv-modelでデータを紐づけている部分は、Vuetifyの時と同じですね。
3行目〜のテキストフィールド側は、
disabled状態(入力できない状態)をデータ変数の変化によって更新させるため、
Vuetifyの時とは少しだけ異なる記述となっています。

具体的には、まず disabled を、:disabled として v-bind しておきます。
v-bind した :disabled の値には、三項演算子を使って

isCheckedPlain.checked ? false : true

として、データ変数が true か false かによる分岐を書いています。

三項演算子は、条件に当てはまれば ? の次の結果を返し、
当てはまらない場合は : の次の結果を返してくれるので、

これにより、Vuetify使用の場合と同じく
「checkboxにcheckを入れたら入力可能になるテキストフィールド」
が実現できる、というわけです。

JavaScript側は、たとえば次の様に書きます。

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const isCheckedPlain = reactive({
        checked: false
      })
      return {
        isCheckedPlain
      }
    }
  }
</script>

↑見てわかる通り、JavaScript側は、
Vuetify使用時と同じ形で大丈夫ということですね。

[素のJavaScript編]checkboxにcheckを入れたら入力可能になるテキストフィールド

ここまでのセクションでは、Vuetify3 もしくは Vue.js3単体を使った
「checkboxにcheckを入れたら入力可能になるテキストフィールド」の作り方についてご紹介しました。

続いては、Vuetify3 も Vue.js どちらも使わずに
VanillaJS 、つまり素のJavaScriptで同じことを実現する方法です。

それではまずはhtmlから書いていきます。

<div>
  <input type="checkbox" class="targetCheck" />
  <input type="text"
    disabled
    class="targetTextField" 
    style="border: 1px solid #e1e1e1;"
  />
</div>

↑上のセクションと同様、この様にシンプルにcheckboxとテキストフィールドが並んでいるとします。
(サンプルのため、styleは直書きしています。実際はclassに適用するのが良いです)

Vuetify も Vue.js も使用しないため、v-model や v-bind と言った
Vue.js 独自の要素はありません。

これをどの様に制御すれば
「checkboxにcheckを入れたら入力可能になるテキストフィールド」が実現できるでしょうか。

一例ですが、次の様なアプローチをすることで、それを実現する事ができます。

<script>
const listenTargetCheckBox = document.querySelector('.targetCheck');
const listenTargetTextField = document.querySelector('.targetTextField');
listenTargetCheckBox.addEventListener('change', (e) => {
  if(e.target.checked) {
    listenTargetTextField.disabled = false;
  }else{
    listenTargetTextField.disabled = true;
  }
});
</script>

2行目、3行目では、querySelector を使って
checkbox、テキストフィールド要素をそれぞれ取得して変数に格納しています。

4〜10行目が、checkboxの変化を監視して、
テキストフィールド要素の状態を更新している部分の記述になります。
具体的には、2行目で取得したcheckbox要素に対して、

listenTargetCheckBox.addEventListener(‘change’, …(中略)

として、changeイベントを監視します。
changeイベントは、checkboxにチェックが入った、または外れた、といった変化を
検出できるので、

その状態の変化によって
6行目、8行目にあるように
テキストフィールドの disabled 状態をfalseにしたり、
trueにしたり切り替えを行っている、というわけです。

この様に、物にもよりますが、意外と簡潔な記述で
Vue.jsを使った場合と同じ様な結果を、素のJavaScriptでも実現する事が可能です。

せっかく世の中にVue.jsをはじめ、
便利なライブラリやフレームワークが存在しているのに、
なぜこんな回りくどい方法をわざわざ書いているかというと、

案件によっては Vue.js や Vuetify を使用する事ができないケース、
そもそも別のライブラリが使われているケースなども多々あるため、
引き出しとして知っておけば、なにかと
対応できる範囲が広がる、カバーできる範囲が広がるのでは、と感じているためです。

この記事のまとめ

今回は、「チェックボックスを入れると入力できる様になるテキストフィールド」について、

・Vuetify3での方法
・Vuetifyに頼らずVue.js3で実現する方法
・VuetifyもVue.js自体も使わずに同じことをする方法

↑これら3つの方法をご紹介しました。

上のセクションでも書きましたが、

・素のJavaScriptによるアプローチ
・Vue.jsによるアプローチ(なんらかのライブラリやフレームワークを用いた方法)

その両方のアプローチ方法を知っておく事で、

WebデザインにおけるUI制作のシーンにおいて、
より深い理解を持った上で
それに臨む事ができると思います。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする：