JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<label>Категория ТС <b>*</b></label>
<select name="catts" id="catts">
  <option value="0">Выберите</option>
  <option value="1" data-param="L" data-priceid="1" selected>Категория 1</option>
  <option value="2" data-param="M" data-priceid="2">Категория 2</option>
  <option value="3" data-param="L, M" data-priceid="3">Категория 3</option>
  <option value="4" data-param="M, X, XL" data-priceid="4">Категория 4</option>
   <option value="5" data-param="X" data-priceid="2">Категория 5</option>
</select>

<div id="prices" style="display:none">
Для категорий, подставляем цену учитывая id категории, для того если у некоторых категорий один id цены.
  <div id="catAprice">1500</div>
  <div id="catBprice">800</div>
  <div id="catDprice">2000</div>
  <div id="catEprice">2500</div>
  <div id="catCprice">2800</div>
</div>

<br /><br />

<label class="mrt2">Выбрать ПТО <b>*</b></label>
<select name="pto" id="pto">
  <option value="0" data-param="" data-price="" data-nauchet="" data-text="">Выберите</option>
  <option value="1" data-param="L" data-nauchet="200" data-text="Текст для пто, текст текст." data-price="+500" selected>Пто пункт 1</option>
  <option value="2" data-param="L, M" data-nauchet="300" data-text="Текст для пто, текст текст." data-price="+800">Пто пункт 2</option>
  <option value="3" data-param="M" data-nauchet="" data-text="" data-price="+600">Пто пункт 2</option>
  <option value="4" data-param="X" data-nauchet="" data-text="" data-price="+1000">Пто пункт 2</option>
</select>

<br />

<div class="nauchetT" style="display:none">
  <div class="nauchetText"></div>
</div>

<br />

<div id="nauchetB" style="display:none">
  <li><input type="checkbox" name="nauchet" id="nauchet" checked="checked" value="Да" />
    <label for="nauchet"><span>Поставить на учет? +<strong id="nauchetPrice"></strong> руб</span></label>
  </li>
</div>

Цена за категорию: <span id="resultPrice"></span><br />
Цена за ПТО:...

CSS

#sum{
  font-size:20px;
  color: #FF2525;
  margin-top:20px;
}
.nauchetT{
  border:1px solid #ccc;
  padding: 10px;
  margin-top: 20px;
  border-radius: 3px;
 width: 250px;
 text-align: center;
}
#resultPrice, #resultPricePTO, #checkboxesPrice{
  color: #FF5500;
  font-weight: 600;
}
#nauchetB{
  margin-bottom: 30px;
}

JavaScript

//При выборе категории берется data-param и сравнивается с ПТО параметром, где в пунктах находит, те и показывает для выбора
$('#catts').on('change', function() {
  var param = $('#catts option:selected').data('param');

  $("#pto option").prop('disabled', false);
  options = $("#pto option").filter(function() {
    var pto_param = $(this).data('param') + '';
    var arr = pto_param.split(',').map(function(item) {
      return item.trim();
    });
    console.log(arr);
    return $.inArray(param, arr) == -1;
  });
  options.prop('disabled', true);
});


$(document).ready(function() {
  $('#pto').change(function() {
    $('div.nauchetB').slideUp();

    //при смене пункта пто, посылаем в прайс 0 и чистим галочку, для того чтобы пересчитывать цену за пто на учет
    //$("#nauchet").attr('data-price', 0);
    //$("#nauchet").prop('checked', false);
    //$('#checkboxesPrice').html(0);
    //----

    let price = $('#pto option:selected').data('nauchet'); //берем цену
    let text = $('#pto option:selected').data('text'); //берем текст

    $("#nauchetPrice").html(price); //выводим сумму с плюсом + в лабел где галочка
    //$("#nauchet").attr('data-price', price); //выводим сумму в импуте где галочка
    $(".nauchetText").html(text); //выводим текст

    (price != "") ? $('#nauchetB').show(): $('#nauchetB').hide(); //тут проверка, если есть что-то в data-nauchet то показываем блок, если нет, то скрываем
    (text != "") ? $('.nauchetT').show(): $('.nauchetT').hide(); //показываем и скрываем блок, если текст есть или если нет его скрываем блок
    getRes() //перезапускаем пересчет
    nauchet(); //перезапускаем функцию чекбокса и подсчета
  });
});

//вызываем программно действия
$(document).ready(function() {
  $('#pto').trigger('change');
});


function nauchet() {
  if ($('#nauchet').is(':checked')) {
    let checkboxesPrice = $('#nauchetPrice').text();
    $('#checkboxesPrice').html(checkboxesPrice); //выводим в скрытый див
  } else {
    let checkboxesPrice = 0;
...