Есть блок с несколькими Input:
<div class="payment-wrap">
<form class="calculator">
<div class="container">
<div class="row">
<div class="wrap-calc">
<label class="fst-lbl" for="intro-class">INTRODUCTORY CLASS</label>
<select id="intro-class" name="intro-class">
<option value="0"></option>
<option value="intro-30">30 minutes</option>
<option value="intro-60">60 minutes</option>
</select>
</div>
<h3 class="payment__cup">LESSON PLANS
</h3>
<div class="wrap-calc">
<label for="length">French course</label>
<select id="length" name="length">
<option value="0"></option>
<option value="General">General Course</option>
<option value="Exams">Exams Preparation</option>
<option value="Conversational">Conversational French</option>
<option value="Business">Business French</option>
<option value="Civilisation">Civilisation française</option>
</select>
</div>
<div class="wrap-calc">
<label for="students">For how many students</label>
<select id="students" name="students">
<option value="0"></option>
<option value="indiv">Individual</option>
<option value="group">2-3 people</option>
</select>
</div>
<div class="wrap-calc">
<label for="duration">Lesson duration</label>
<select id="duration" name="duration">
<option value="0"></option>
<option value="lesDur-30">30 minutes</option>
<option value="lesDur-60">60 minutes</option>
<option value="lesDur-90">90 minutes</option>
</select>
</div>
<div class="wrap-calc">
<label for="validity">Plan validity</label>
<select id="validity" name="validity">
<option value="0"></option>
<option value="1month">One month</option>
<option value="3months">Three months</option>
</select>
</div>
<div class="wrap-calc">
<div class="submit-block">
<p>This French course costs : <span value="0" id="result-culc"></span> euros</p>
</div>
</div>
</div>
</div>
</form>
</div>
Вопрос:
Как сделать так, что бы при значении value
селекта id="intro-class"
не равном '0'
, все остальные селекты становились неактивными?
И обратно - при value = '0'
, остальные селекты вновь становились активными?
И в конце, если возможно ответить еще на один вопрос:
Как в одной функции jQuery следить за изменением значений, которые вынесены в переменные? Мне главное синтаксис, чтобы функция работала. Может так?:
Чтобы легче было от моего ужаса оттолкнутся. Вот, правильно ли?:
(length,students,duration).addEventListener('change', function(){}
Как это всё реализовать на jQuery?
UPD: с очищением полей
$('#intro-class').change(function(){
var val = $(this).val();
if(val != 0) {
$('select').not($(this)).attr('disabled', true);
$('select').not($(this)).val('');
}
else {
$('select').attr('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="payment-wrap">
<form class="calculator">
<div class="container">
<div class="row">
<div class="wrap-calc">
<label class="fst-lbl" for="intro-class">INTRODUCTORY CLASS</label>
<select id="intro-class" name="intro-class">
<option value="0"></option>
<option value="intro-30">30 minutes</option>
<option value="intro-60">60 minutes</option>
</select>
</div>
<h3 class="payment__cup">LESSON PLANS
</h3>
<div class="wrap-calc">
<label for="length">French course</label>
<select id="length" name="length">
<option value="0"></option>
<option value="General">General Course</option>
<option value="Exams">Exams Preparation</option>
<option value="Conversational">Conversational French</option>
<option value="Business">Business French</option>
<option value="Civilisation">Civilisation française</option>
</select>
</div>
<div class="wrap-calc">
<label for="students">For how many students</label>
<select id="students" name="students">
<option value="0"></option>
<option value="indiv">Individual</option>
<option value="group">2-3 people</option>
</select>
</div>
<div class="wrap-calc">
<label for="duration">Lesson duration</label>
<select id="duration" name="duration">
<option value="0"></option>
<option value="lesDur-30">30 minutes</option>
<option value="lesDur-60">60 minutes</option>
<option value="lesDur-90">90 minutes</option>
</select>
</div>
<div class="wrap-calc">
<label for="validity">Plan validity</label>
<select id="validity" name="validity">
<option value="0"></option>
<option value="1month">One month</option>
<option value="3months">Three months</option>
</select>
</div>
<div class="wrap-calc">
<div class="submit-block">
<p>This French course costs : <span value="0" id="result-culc"></span> euros</p>
</div>
</div>
</div>
</div>
</form>
</div>
Что касается второго вопроса, то всё зависит от того, какой именно результат Вы хотите получить при изменении. Если Вам надо просто отслеживать, изменился ли какой-то из селектов, то просто перечисляете их и навешиваете один обработчик:
$('#length, #students, #duration').change(function() { ... });
Если же результаты изменений разных селектов должны быть различны, то решение будет иным.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть вот такой скрипт который получает данные от instagramКак мне получив значение, она в виде ссылки, вставить ее в атрибут src img который находиться...
Как удалить такой тег? <script src="/page/somejs" type="text/javascript"></script>
Есть сайт который работает на chrome, mozilla, operaА в IE и safari выдает ошибку в этом файле
Есть несколько компов которые объединены одной локальной сетью через маршрутизаторКаждый из них должен отправлять данные на один комп