チェックを入れるとsumがvalue分だけ加算されるフォームを作りました。
※全てtype=checkbox
$(':checkbox').click(function(){
var LEN = $(':checkbox').length;
var check = $(this).attr('checked');
var price = $(this).val();
check?sum += price:sum -= price;
});
var money = 10000;//所持金
var sum//チェックした商品valueの合計
//html↓
商品1 value 1000
商品2 value 1000
商品3 value 5000
商品4 value 8000
商品5 value 10000
以上のようなチェックボックスで、money(所持金)を越える金額はチェック不可にした上で不可にしたチェックボックスのcssを変更したいです。
例)商品1,2,3までチェックを入れた場合に4,5にはチェックが入れられないようにする。3のチェックを外すと4がチェック可能に戻る
どなたかご教授ください。お願いします。
No.1
こんな感じでしょうか。
<script type="text/javascript"> var money = 10000; // 所持金 $(document).ready(function() { $('.item:checkbox').click(function(){ // class=itemのcheckboxをクリックしたら var konyu = 0; // 購入予定金額 // チェックした値の合計を出す $('.item:checkbox').each(function(){ // class=itemのcheckboxをすべてループ if($(this).attr('checked')){ // チェックした項目のとき konyu += parseInt($(this).attr('value')); // 購入予定金額に値を足す } }); var nokori = money - konyu; // 所持金-購入予定金額=残額 $('.item:checkbox').each(function(){ // class=itemのcheckboxをすべてループ $(this).attr('disabled', false); // すべて入力可能にリセット if(!$(this).attr('checked')){ // チェックしていない項目のとき if(parseInt($(this).attr('value')) > nokori){ // 残額よりも値が大きかったら $(this).attr('disabled', true); // 入力不可にする } } }); }); }); </script> <input type="checkbox" name="item1" value="1000" id="item1" class="item"><label for="item1">商品1</label> <input type="checkbox" name="item2" value="1000" id="item2" class="item"><label for="item2">商品2</label> <input type="checkbox" name="item3" value="5000" id="item3" class="item"><label for="item3">商品3</label> <input type="checkbox" name="item4" value="8000" id="item4" class="item"><label for="item4">商品4</label> <input type="checkbox" name="item5" value="10000" id="item5" class="item"><label for="item5">商品5</label>
1
4
2
コメント（0件)