Multiplying data value with Jquery

Question

I have some checkboxes that look like this:

I want to multiply the data-raw-price & data-price with 3, when i select a bigger size in a dropdown.

I tried something like this:

    $(document).on('change', '#pa_size', function() {

      if ($("#pa_size").val() == "32cm-normal") {
        var value = parseFloat($(".addon-checkbox").data('price').val());
        $(".addon-checkbox").data('price').val(value * 3);
      } else {

        $(".addon-checkbox").data('price');
      }


    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size">
  <option value="" selected="selected">Válassz egy lehetőséget</option>
  <option value="32cm-normal" class="attached enabled" selected="selected">32 cm (normál)</option>
  <option value="52cm-csaladi" class="attached enabled">52 cm (családi)</option>
</select>
<input type="checkbox" class="addon addon-checkbox" name="addon-4851-husok-2[]" data-raw-price="250" data-price="250" value="sonka">

But i'm really not sure how to address those values and muliply.

Thx

Answer 1

You don't need to use val(). You get the data attribute without that, also it won't work using val().

So change:

parseFloat($(".addon-checkbox").data('price')).val();

to this:

parseFloat($(".addon-checkbox").data('price'));

Also data() does not update data attribute of an element, it only allocates it in memory. You need to use attr() for this and it should work.

Try this:

$(document).on('change', '#pa_size', function() {
  if ($("#pa_size").val() == "32cm-normal") {
    var dataPrice = parseFloat($(".addon-checkbox").data('price'));
    $(".addon-checkbox").attr('data-price', dataPrice * 3);
    console.log($(".addon-checkbox").attr('data-price'));
  } else {
     $(".addon-checkbox").data('price');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size">
  <option value="" selected="selected">Válassz egy lehetőséget</option>
  <option value="32cm-normal" class="attached enabled">32 cm (normál)</option>
  <option value="52cm-csaladi" class="attached enabled">52 cm (családi)</option>
</select>
<input type="checkbox" class="addon addon-checkbox" name="addon-4851-husok-2[]" data-raw-price="250" data-price="250" value="sonka">