Vue.jsでチェックされたら or 入力されたら送信可能にするボタンを実装する方法
最近、色々なJavaScriptフレームワークを使ってみている中原です。
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 | NxWorld
今日上記の記事がはてなブックマークで話題になってました。
これと同じことをVue.jsのデータバインディングを利用して実装してみました。
Vue.jsの公式サイトはこちらです。
vue.js
（本当はHTMLとJavascript部分を別ファイルに分けて書くべきだと思いますが、今回は同じファイルに記述しています）
（追記）デモページ作成しました。
デモページ
チェックボックスにチェックされたら送信可能にするボタン
チェックが付いてない場合はSubmitボタンは非活性です。
チェックを付けるとSubmitボタンが活性になります。
24行目のVue.jsのModelのagreeというプロパティが、11行目のチェックボックスとバインドされています。
v-model="agree"
の部分です。
Modelのagreeはチェックが付くとtrueになり、外れるとfalseになります。
12行目でこのModelの値を条件にSubmitボタンのdisabledを切り替えています。
v-attr="disabled: !agree"
の部分です。
これでチェックボックスとボタンの実装はできます。
文字が入力されたら送信可能にするボタン
テキストボックスの値が空の場合はSubmitボタンは非活性です。
何か入力するとSubmitボタンが活性になります。
これもチェックボックスのパターンと一緒でテキストボックスの値をModelとバインドし、Modelの値を条件にボタンの活性・非活性を実装しています。
まとめ
元記事は「jQueryを使ってどう実装するか」というのが主旨だと思いますが、データバインディングができるJavaScriptフレームワークを使ったとしたらこんな感じで実装できます。
もちろん、Vue.jsじゃなくてもAngular.jsやKnockout.jsでも実装できます。
てことで、スッキリ書けるしデータバインディング良いですよね。
