Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как переделать js, чтобы не воспринималось двойное нажатие на radio кнопку (https://javascript.ru/forum/misc/64648-kak-peredelat-js-chtoby-ne-vosprinimalos-dvojjnoe-nazhatie-na-radio-knopku.html)

drkrol 27.08.2016 04:11

Как переделать js, чтобы не воспринималось двойное нажатие на radio кнопку
 
Здравствуйте. Есть вот такой код https://jsfiddle.net/dfybvwoh/10/ . В начале через select задаётся цена товара товара, а потом через radio кнопки добавляется 2000 или цена остаётся прежней. Этот код рабочий, но мне он не подходит. В своём сайте я использую jquery form styler, и с помощью его я модифицирую внешний вид input'ов, а именно input type="radio". Загвоздка в том, что используя этот form styler можно выбрать один и тот же radio несколько раз. 1 раз нажал на radio - получил 500, еще раз нажал - получил 1000, и так далее. Помогите пожалуйста переделать код так, чтобы этого бага не было. То есть нажатие на radio не приводило к повторному прибавлению.

рони 27.08.2016 08:38

drkrol,
if ($( this ).val() == "notime" & time_plus == true) :blink:

рони 27.08.2016 08:41

drkrol,
опишите все комбинации вычисления цены

Strongman 27.08.2016 09:09

Где двойное срабатывание? Не вижу. У меня все нормально работает на jsfiddle.net.

рони 27.08.2016 09:19

Цитата:

Сообщение от Strongman
Где двойное срабатывание?

Цитата:

Сообщение от drkrol
В своём сайте я использую jquery form styler,

;)

drkrol 27.08.2016 09:52

рони,
В начале через select, где 8 option (типы), а потом через радио кнопку. Больше ценообразования нет.

рони 27.08.2016 10:12

калькулятор стилизация при помощи jQuery Form Styler
 
drkrol,
варианты цены это строки 22 - 29 ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.formstyler/1.7.6/jquery.formstyler.css">
  <script src="https://cdn.jsdelivr.net/jquery.formstyler/1.7.6/jquery.formstyler.min.js"></script>
  <script>
$(function() {
    var inp = $('input[name="time"]'),
        sel = $('select[name="type"]'),
        items = $().add(inp).add(sel),
        price = $(".price");
    items.styler().on("change", function() {
        var t = sel[0].selectedIndex,
            r = inp.index(inp.filter(":checked"));
        price.val({
            1: {
                0: 2500,
                1: 500
            },
            2: {
                0: 2800,
                1: 800
            }
        }[t][r] || 0)
    })
});
  </script>
</head>

<body>
   <select name="type" class="type">
     <option ></option>
     <option>Тип1</option>
     <option>Тип2</option>
   </select>
   <p></p>
   <label>
      <input type="radio" name="time" value="yestime" class="rrad">
      <div class="rtext">Трубы горят</div>
      </label>

      <label>
      <input type="radio" name="time" value="notime" class="rrad">
      <div class="rtext">Время есть</div>
      </label>

     <input type="text" class="price" value="0" readonly>

</body>
</html>

drkrol 27.08.2016 11:28

рони,
Извини, не хочу создавать новую тему. Ты бы не мог подсказать,как сделать так, чтобы после того, как будет выбран select и radio выполнялось действие:

$('.priceblock').removeClass('none');

?

рони 27.08.2016 11:44

Цитата:

Сообщение от drkrol
Извини, не хочу создавать новую тему.

и ненужно плодить лишнее.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .none{
    display: none;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.formstyler/1.7.6/jquery.formstyler.css">
  <script src="https://cdn.jsdelivr.net/jquery.formstyler/1.7.6/jquery.formstyler.min.js"></script>
  <script>
$(function() {
    var inp = $('input[name="time"]'),
        sel = $('select[name="type"]'),
        items = $().add(inp).add(sel),
        price = $(".price"),
        block = $('.priceblock');
    items.styler().on("change", function() {
        var t = sel[0].selectedIndex,
            r = inp.index(inp.filter(":checked")),
            num = {
            1: {
                0: 2500,
                1: 500
            },
            2: {
                0: 2800,
                1: 800
            }
        }[t][r] || 0;
        price.val(num);
        num && block.removeClass('none')
    })
});
  </script>
</head>

<body>
   <select name="type" class="type">
     <option ></option>
     <option>Тип1</option>
     <option>Тип2</option>
   </select>
   <p></p>
   <label>
      <input type="radio" name="time" value="yestime" class="rrad">
      <div class="rtext">Трубы горят</div>
      </label>

      <label>
      <input type="radio" name="time" value="notime" class="rrad">
      <div class="rtext">Время есть</div>
      </label>

     <input type="text" class="price" value="0" readonly>
     <div class="priceblock none">скрытый блок</div>
</body>
</html>


Часовой пояс GMT +3, время: 19:35.