以前投稿したradioボタン制御と同じような内容でcheckboxの制御のサンプルを作成しました。
radioボタンの場合との違いは、checkboxの場合は複数あることを考慮して、「1つ以上checkedされたら」という条件を設けることです。
radioボタンの場合との違いは、checkboxの場合は複数あることを考慮して、「1つ以上checkedされたら」という条件を設けることです。
checkboxによる制御
■html
<div id="sample"> <label><input type="checkbox" /> テスト1</label> <label><input type="checkbox" /> テスト2</label> <label><input type="checkbox" /> テスト3</label> <label><input type="checkbox" /> テスト4</label> <label><input type="checkbox" /> テスト5</label> <div><input type="text" disabled="disabled" value="入力不可" /></div> </div> <!--sample-->
■javascript
$(function() { $("#sample :checkbox").click(function() { if($("#sample :checked").length > 0) { $("#sample :text").attr('disabled', false); $("#sample :text").val('入力可'); } else { $("#sample :text").attr('disabled', true); $("#sample :text").val('入力不可'); } }); });
解説
イベントは何でもよいですが、今回は「checkboxをクリックしたら」とします。
「:checkbox」は全てのcheckbox要素を選択するセレクタです。
$("#sample :checkbox").click(function() {
↓if文による条件は”id名が「sample」の要素内で値が「checked」のものが0以上あったら”…つまり言い換えると”checkedのものがある場合は”となります。
if($("#sample :checked").length > 0) {
↓今回は、上記の条件を満たした場合、全てのtext要素の属性値「disabled」をfalseにし、valueの値を変更。テキストエリアへの入力を可能にします。
$("#sample :text").attr('disabled', false); $("#sample :text").val('入力可');
↓そして条件を満たさなかった、つまり1つもチェックが入っていない場合は、初期の状態に戻します。
} else { $("#sample :text").attr('disabled', true); $("#sample :text").val('入力不可'); }