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" />サブ１
<input id="sub_checkbox2" type="checkbox" name="sub_checkbox" value="2" />サブ２
<input id="sub_checkbox3" type="checkbox" name="sub_checkbox" value="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で一つずつ回すのですが、

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

-jQuery
-, , ,