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

前記事: 12. 特定の単語を入力したらボタンを無効にする
次記事: 14. 「承認」ボタンを押したら解除できないようにする

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

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

サンプルコード

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

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

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

前記事: 12. 特定の単語を入力したらボタンを無効にする
次記事: 14. 「承認」ボタンを押したら解除できないようにする

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。