jQueryの「prop()」は、属性プロパティに値を設定したり、設定されている値を取得することができます。
これを利用して、よくあるフォーム内の動きを実装します。

サンプル(1)は、checkboxをチェックすると、入力フィールドが有効になります。

サンプル(2)は、複数のcheckboxがあるケースで、すべてチェックする場合、「すべてを選択」のひとつのチェックで済むようにします。

サンプル(1)


スマホの機種名:

サンプル(2)







サンプル(1)のhtmlソース

<input name="sample1" type="checkbox" value="" id="test1" />
<label for="test1">&nbsp;スマホを持っている</label><br />
スマホの機種名:<input name="sample11" type="text" id="input1" disabled="disabled" />

サンプル(1)のscriptソース

$('#test1').on('change',function(){
   var check1 = $(this).prop('checked'),
   obj = $('#input1');
   (check1) ? obj.prop('disabled',false) : obj.prop('disabled',true) ;
});

サンプル(2)のhtmlソース

<label><input type="checkbox" name="sample2" value="" id="test2" />&nbsp;すべてを選択</label><br />
<label><input type="checkbox" name="sample22" value="1" />&nbsp;東京</label><br />
<label><input type="checkbox" name="sample22" value="2" />&nbsp;大阪</label><br />
<label><input type="checkbox" name="sample22" value="3" />&nbsp;京都</label><br />  
<label><input type="checkbox" name="sample22" value="4" />&nbsp;福岡</label><br /> 
<label><input type="checkbox" name="sample22" value="5" />&nbsp;札幌</label><br />   

サンプル(2)のscriptソース

$('#test2').on('change', function() {
	$('input[name=sample22]').prop('checked', this.checked);
});

 

※引用、参考:
http://www.jquerystudy.info/reference/attributes/prop.html
http://qiita.com/kbyay_/items/7a7ce9547f29b34a63b1
戻るボタン