チェックボックスの変更を監視して、チェック状態に応じて何かする方法です。
例えば、チェックを入れたら入力フォームを出すとか、そんな時に使えそうですね。
作ってみます
チェックボックスに対して、 change で変更があったら、 checked かどうかを判定すればよさそうですので、こんな感じですかね?
1 2 3 4 5 6 7 |
$('#test_ckb').change(function(){ if ($(this).is(':checked')) { $('#result').append('<p>hey</p>'); } else { $('#result').append('<p>jude</p>'); } }); |
デモ
実際には文字を出すとかよりも、要素を出したり消したり、ボタンにつけた disabled をつけたり消したりって使い方が主流になるのかな?
改造してみます
大枠はさっきのまま使えますのでそのまま残して、改造して行きます。
1 2 3 4 5 6 7 8 9 |
$('#test_ckb').change(function(){ if ($(this).is(':checked')) { $('#input_box').removeAttr('disabled').focus(); $('.input_label').removeClass('disabled'); } else { $('#input_box').attr('disabled','disabled'); $('.input_label').addClass('disabled'); } }); |
あまり変なことはしてませんね。
disabledを無効化する方法ですが、「disabled=”disabled”」はアトリビュート(属性)なので、removeAttrで属性をまるっと削除すればよさそうです。
有効化したエレメントは普通そこに入力してほしい場所ですので、ついでに「focus()」も追加してフォーカスをあててあげればチェックボックスをクリックした後インプットエリアをもう一度クリックしなくて済むのでちょっと親切かもしれませんね。
逆にチェックが外れたら、再び disabled したいので、今度はアトリビュートを追加してあげます。
$(‘セレクタ’).attr(‘属性名’,’属性値’);
disabledは「disabled=”disabled”」とするので、
.attr(‘disabled’,’disabled’);
ってしてあげればOKそうですね。
デモ
これでチェックボックスがONじゃないと入力できないフォームが作れました。
これは応用次第でいろいろと使えるんじゃないでしょうか?
コメントする