Sum and disable checkboxes

by Brad Patton

HTML

<div class="sg-question-set"><div id="sgE-2243500-5-6-box" class="sg-question sg-type-checkbox sg-cc-hook">
	<input type="hidden" id="sgE-2243500-5-6-meta" name="sgE-2243500-5-6-meta" value="hidden=false&amp;required=false">
	<input type="hidden" id="sgE-2243500-5-6-time" name="sgE-2243500-5-6-time" value="0.01">
		<div class="sg-question-title">
	<span class="sg-question-number">2.</span> Budget items	</div>
		<div class="sg-question-options">
	<ul class="sg-list sg-list-vertical sg-list-vertical-flipped sg-labels-right">
	<li class="sg-first-li">
	<input type="checkbox" class="sg-input sg-input-checkbox" name="sgE-2243500-5-6-10007" id="sgE-2243500-5-6-10007" value="10007" title="Apple">
<label for="sgE-2243500-5-6-10007">Apple</label>	</li>
		<li>
	<input type="checkbox" class="sg-input sg-input-checkbox" name="sgE-2243500-5-6-10008" id="sgE-2243500-5-6-10008" value="10008" title="Bread">
<label for="sgE-2243500-5-6-10008">Bread</label>	</li>
		<li>
	<input type="checkbox" class="sg-input sg-input-checkbox" name="sgE-2243500-5-6-10009" id="sgE-2243500-5-6-10009" value="10009" title="Cake">
<label for="sgE-2243500-5-6-10009">Cake</label>	</li>
		<li>
	<input type="checkbox" class="sg-input sg-input-checkbox" name="sgE-2243500-5-6-10010" id="sgE-2243500-5-6-10010" value="10010" title="Doughnuts">
<label for="sgE-2243500-5-6-10010">Doughnuts</label>	</li>
		<li>
	<input type="checkbox" class="sg-input sg-input-checkbox" name="sgE-2243500-5-6-10011" id="sgE-2243500-5-6-10011" value="10011" title="Eclairs">
<label for="sgE-2243500-5-6-10011">Eclairs</label>	</li>
		<li>
	<input type="checkbox" class="sg-input sg-input-checkbox" name="sgE-2243500-5-6-10012" id="sgE-2243500-5-6-10012" value="10012" title="Funnel Cake">
<label for="sgE-2243500-5-6-10012">Funnel Cake</label>	</li>
		<li class="sg-last-li">
	<input type="checkbox" class="sg-input sg-input-checkbox" name="sgE-2243500-5-6-10013" id="sgE-2243500-5-6-10013" value="10013" title="Goose">
<label...

CSS

.disabled {
   color: darkgrey;
}

JavaScript

var checkboxTable = {};
checkboxTable["#sgE-2243500-5-6-10007"] = 10;
checkboxTable["#sgE-2243500-5-6-10008"] = 20;
checkboxTable["#sgE-2243500-5-6-10009"] = 30;
checkboxTable["#sgE-2243500-5-6-10010"] = 40;
checkboxTable["#sgE-2243500-5-6-10011"] = 50;
checkboxTable["#sgE-2243500-5-6-10012"] = 60;
checkboxTable["#sgE-2243500-5-6-10013"] = 70;

$(function(){
    // Add the total label at the bottom of the list
	$('#sgE-2243500-5-6-box').append('<div id="total">Total: </div>');

    // Hook the change event for each checkbox to recalc the total
    $.each(checkboxTable, function (key, value) {
		$(key).change (function(){
            console.log('checked');
			RecalcTotal();
		})
	})
});

function RecalcTotal() {
    
    // Get the sum by adding the checked boxes
    var sum = 0;
	$.each(checkboxTable, function (key, value) {
        if ($(key).is(':checked')) sum += value;
    });
    
    // Disable those checkboxes whose values are greater than the remaining amount
    var remain = 100 - sum;
    $.each(checkboxTable, function (key, value) {
        var checkbox = $(key);
        var label = checkbox.next();
        if (!checkbox.is(':checked') && value > remain) {
            checkbox.prop("disabled", true);
            label.addClass('disabled');
        } else {
            checkbox.prop("disabled", false);;
            label.removeClass('disabled');
        }
    });
	
    // Update the total
    $('#total').text("Total: " + sum);
}