NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

jQueryでチェックボックスを監視して変更に応じて何かする

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1222日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

チェックボックスの変更を監視して、チェック状態に応じて何かする方法です。

例えば、チェックを入れたら入力フォームを出すとか、そんな時に使えそうですね。

作ってみます

チェックボックスに対して、 change で変更があったら、 checked かどうかを判定すればよさそうですので、こんな感じですかね?

デモ

実際には文字を出すとかよりも、要素を出したり消したり、ボタンにつけた disabled をつけたり消したりって使い方が主流になるのかな?

 改造してみます

大枠はさっきのまま使えますのでそのまま残して、改造して行きます。

 あまり変なことはしてませんね。

disabledを無効化する方法ですが、「disabled=”disabled”」はアトリビュート(属性)なので、removeAttrで属性をまるっと削除すればよさそうです。

有効化したエレメントは普通そこに入力してほしい場所ですので、ついでに「focus()」も追加してフォーカスをあててあげればチェックボックスをクリックした後インプットエリアをもう一度クリックしなくて済むのでちょっと親切かもしれませんね。

逆にチェックが外れたら、再び disabled したいので、今度はアトリビュートを追加してあげます。

$(‘セレクタ’).attr(‘属性名’,’属性値’);

disabledは「disabled=”disabled”」とするので、

.attr(‘disabled’,’disabled’);

ってしてあげればOKそうですね。

デモ

これでチェックボックスがONじゃないと入力できないフォームが作れました。

これは応用次第でいろいろと使えるんじゃないでしょうか?

TAGS