匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

jQueryでのチェックボックス制御


チェックを入れると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がチェック可能に戻る

どなたかご教授ください。お願いします。

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2013/01/21 20:54:10
  • 終了:2013/01/28 20:55:04

回答(1件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/01/22 14:58:16

こんな感じでしょうか。

<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>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません