かえでBlog

色々なことを徒然と……

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

      2015/05/18

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

ちぇっくボックスはこんな感じ↓

<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から機能追加された模様。

それまでは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 , , ,