jQuery

【jQuery】チェックボックスにてdisableをつける(または外す)

2013年8月7日

チェックボックスを用意し、メインのチェックボックスチェックするとサブが入力可能に、メインのチェックボックスを外すとサブが入力不可になる制御を付けようと思いました。

チェックボックスはこんな感じ↓

<input id="main_checkbox" type="checkbox" name="main_checkbox" value="1" />メイン
<input id="sub_checkbox1" type="checkbox" name="sub_checkbox" value="1" />サブ1
<input id="sub_checkbox2" type="checkbox" name="sub_checkbox" value="2" />サブ2
<input id="sub_checkbox3" type="checkbox" name="sub_checkbox" value="3" />サブ3

【サンプル】

メイン サブ1 サブ2 サブ3

jQueryでチェックボックスのオン・オフをしようと思うとpropを使うといいとGoogle先生から教わったので

if($("#main_checkbox").prop('checked')){
	$("input:checkbox[name='sub_checkbox']").prop({'disabled':false});
}else{
	$("input:checkbox[name='sub_checkbox']").prop({'disabled':true});
}

を記述して再読み込みして確認!

…あれ?動かない。

開発者ツールで確認してみると

Uncaught TypeError: Object #<Object> has no method 'prop'

あれ、propというメソッド存在しないぞって言われてるよorz

propメソッドはjQuery1.6から

どうやらpropはjQuery1.6から機能追加された模様。

それまではattrでまとめて処理できるみたい。

自分が改修してるWEBのバージョンは1.3.4だったのでpropはなかったというわけでした。

if($("#main_checkbox").attr('checked')){
	$("input:checkbox[name='sub_checkbox']").attr({'disabled':false});
}else{
	$("input:checkbox[name='sub_checkbox']").attr({'disabled':true});
}

何らかの事情によって古いのjQueryを使っている人は注意が必要です。

jQuery使わない場合だとgetElementsByNameで取得してforで一つずつ回すのですが、

たった1行でチェックボックスのdisable付与とか簡単にできるのは便利ですね。

-jQuery
-, , ,