Показать сообщение отдельно
  #1 (permalink)  
Старый 19.06.2018, 19:52
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 53

Привязка input radio к слайдеру jQuery-UI
Есть простой калькулятор для рассчёта прибыли.
Там есть три тарифных плана.
START: 100-1000
STANDART: 1001-3000
PREMIUM: 3001-5000

Нужно добиться того, чтобы при вводе в текстовое поле определённого числа в диапазоне от 100 до 5000, один из input radio становился активным автоматически. Т.е. нужно связать радиокнопки, ползунок и числовое поле (ползунок и числовое поле уже взаимосвязаны). Тут ещё сложность в том, что планы перебираются циклом foreach в смарте.

Вёрстка калькулятора:
<form method="post" name="calc" onsubmit="recalc(); return false;">
  <div>
    <ul>
    {foreach from=$calc_pselect item=i key=k}
      <li><label class="radio"><input type="radio" name="plan" value="{$k}" checked><div>{$i}</div></label>
      </li>
    {/foreach}
  </ul>
</div>
            
<div>
  <input name="sum" id="calc_sum" type="text" class="minCost" value=""/>
  <div class="slider"></div>
</div>
<div>
  <input name="calc_btn" value="Рассчитать" type="submit">
</div>
{_getFormSecurity form='calc'}
</form>


Скрипт такой:
jQuery(document).ready(function($) {
  var input = $('input.minCost');
  var slider = $('.slider').slider({
    range: 'max',
    min: 100,
    max: 5000,
    value: 100,
    step: 10,
    animate: 300,
    slide: function(event, ui) {
      input.val(ui.value);
    }
  });

  input.val(slider.slider('value'));

  input.on('change', function() {
    slider.slider('value', $(this).val());
  });
  
  jQuery("input.minCost").change(function(){

	var value1=jQuery(input).val();
    if (value1 > 5000) { value1 = 5000; jQuery(input).val(5000)}
    if (value1 < 100) { value1 = 100; jQuery(input).val(100)}

	jQuery(".slider").slider("values",0,value1);	
});
// фильтрация ввода в поля
	jQuery('input').keypress(function(event){
		var key, keyChar;
		if(!event) var event = window.event;
		
		if (event.keyCode) key = event.keyCode;
		else if(event.which) key = event.which;
	
		if(key==null || key==0 || key==8 || key==13 || key==9 || key==46 || key==37 || key==39 ) return true;
		keyChar=String.fromCharCode(key);
		
		if(!/\d/.test(keyChar))	return false;	
	});
});


И картинка для удобного восприятия:
ipic
Ответить с цитированием