jQueryの「prop()」は、属性プロパティに値を設定したり、設定されている値を取得することができます。
これを利用して、よくあるフォーム内の動きを実装します。
サンプル(1)は、checkboxをチェックすると、入力フィールドが有効になります。
サンプル(2)は、複数のcheckboxがあるケースで、すべてチェックする場合、「すべてを選択」のひとつのチェックで済むようにします。
<input name="sample1" type="checkbox" value="" id="test1" /> <label for="test1"> スマホを持っている</label><br /> スマホの機種名:<input name="sample11" type="text" id="input1" disabled="disabled" />
$('#test1').on('change',function(){ var check1 = $(this).prop('checked'), obj = $('#input1'); (check1) ? obj.prop('disabled',false) : obj.prop('disabled',true) ; });
<label><input type="checkbox" name="sample2" value="" id="test2" /> すべてを選択</label><br /> <label><input type="checkbox" name="sample22" value="1" /> 東京</label><br /> <label><input type="checkbox" name="sample22" value="2" /> 大阪</label><br /> <label><input type="checkbox" name="sample22" value="3" /> 京都</label><br /> <label><input type="checkbox" name="sample22" value="4" /> 福岡</label><br /> <label><input type="checkbox" name="sample22" value="5" /> 札幌</label><br />
$('#test2').on('change', function() { $('input[name=sample22]').prop('checked', this.checked); });