Avatar billede mazey Praktikant
14. januar 2015 - 22:05

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
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester