jQuery テキストエリアに文字が入力されたらsubmitボタンを有効にする

経緯

Laravelで検索機能を実装しようとしてキーワードが入力されていないときのバリデーションをどうしようかと思ったけどボタンを押せなくすればいいじゃん。

多分同じ記事は腐るほどあると思うけど自分みたいなLaravel初心者がいるとしてここにたどり着いてくれるように祈りを込めて。（備忘録でもある）

HTML

<form action="#" method="GET">
    <input type="text" id="key_word_input" name="key_word" placeholder="キーワードを入力してください">
    <button type="submit" id="search_button">検索</button>
</form>

jQuery

テキストボックスに変更があるたびにvalue属性を調べてdisabled属性を切り替える。

var keyWord = $('#key_word_input');
var searchButton = $('#search_button');

$(searchButton).prop('disabled', true);

$(keyWord).on('change', function() {
    if($(keyWord).val()) {
        $(searchButton).prop('disabled', false);
    } else {
        $(searchButton).prop('disabled', true);
    }
});

おわりに

調べなくてもちょっとずつjQuery書けるようになってきて嬉しい。

ちなみに肝心の検索機能はまだできていない。
できたらまたメモするかもしれないです。