Tech Racho エンジニアの「?」を「!」に。
  • 開発

Vue.jsサンプルコード(13)「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする

13. 「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする

  • Vue.jsバージョン: 2.5.2
  • 「承認」チェックボックスがオフだと「送信]ボタンが半透明になり、押しても効きません。
  • 「承認」チェックボックスをオンにすると「送信」ボタンが押せる状態になります。
  • 画面を再読み込みすると最初の状態に戻ります。

サンプルコード


ポイント: htmlのボタンの属性の:disabled="!a"で、aの論理値を反転しています。

        <div class="btn btn-primary" :disabled="!a">
          送信
        </div>

「承認」チェックボックスがオフの状態だと、「送信」ボタンの属性はdisabled="true"ではなくdisabled="disabled"になるのでご注意ください。


バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。