Есть блок с несколькими 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() { ... });
Если же результаты изменений разных селектов должны быть различны, то решение будет иным.
Сборка персонального компьютера от Artline: умный выбор для современных пользователей