Få jQuery til at validere checkboxe og deaktivere dem

Hej eksperter,

Jeg forsøger at udvikle en lille konfigurator, hvor det er muligt at vælge ting til en værktøjskasse.

Disse ting vælges vha. checkboxe - udfordringen er således, at jeg gerne vil have, at checkboxene automatisk deaktiveres, hvis værdi-størrelsen for den enkelte checkbox overstiger den resterende plads, der er tilbage.

Se demo: http://mazey.dk/bato/temp.php?cart=9133

Som det kan ses i tillægstingene i højre side, så har de alle en checkbox. Vælges den første kan det ses hvor meget plads, der er brugt og hvor meget plads der er.

Jeg har så i jQuery forsøgt mig med lidt forskelligt for, at få jQuery til at validere for hver gang der vælges en ting, at hvis de resterende checkboxes værdi overstiger den samlede resterende plads/værdi, så skal de deaktiveres og den omsluttede DIV skal sættes ned i opacity, men jeg kan ikke få det til at lykkes, så jeg håber nogen kan hjælpe.

Koden ser således ud:

<div id="result"></div> 

<form action="" method="post">
<input type="hidden" id="totalSpaces" value="4">
<?
    $hent_access  = mysql_query("SELECT * FROM bato_produkter WHERE typen = 2");
    while($hent_access_data = mysql_fetch_array($hent_access)){
        $erstat2 = str_replace('BATO','bata',$hent_access_data[navn]);
    ?>
  <div id="mydiv_<?=$hent_access_data[vnr]?>">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td><img src="images/<?=$hent_access_data[vnr]?>.jpg" width="150" class="apply_image"  /></td>
  </tr>
  <tr>
    <td class="product_list_header"><?=$erstat2?></td>
  </tr>
  <tr>
    <td  class="product_list_header">kr. <?=$hent_access_data[pris]?></td>
  </tr>
  <tr>
  <td class="product_list_header"><input type="checkbox" name="selected[]" value="<?=$hent_access_data[vnr]?>" data-spaces="<?=$hent_access_data['funktion']?>" /></td>
  </tr>
</table>
</div>
<?
}
?>

<script>

    //*** ADDED FOR NEW QUESTION ***
    var totalSpaces = $('#totalSpaces').val();
    var usedSpaces = 0;

    // triggered when user clicks a checkbox
    $('input[name="selected[]"]').on('change',function () {


        //*** ADDED FOR NEW QUESTION ***
        currentSpaces = parseInt($(this).data('spaces'));


        if ($(this).is(':checked')) usedSpaces += currentSpaces;
        else usedSpaces -= currentSpaces;

        spacesLeft = totalSpaces - usedSpaces;



        // grabs the selected checkbox values
        var data = $("form").serialize();


        // Sends the data via POST to hello.php
        $.ajax({
            url: "hello.php",
            type: "POST",
            dataType: 'html',
            async: true,
            cache: false,
            data: data,
            success: function(data) {


if ($('input[name="selected[]"]').data('spaces') > spacesLeft) {   
        $("#mydiv").css({ opacity: 0.5 });
        $('input[name="selected[]"]').not(':checked').prop('disabled',true);
        }else{
        $("#mydiv").css({ opacity: 1 });
        $('input[name="selected[]"]').prop('disabled',false);
        }

            $('#result').html(data);
            }
        });
    });
</script>

Håber nogen kan hjælpe :-D