Переключение активности у Input

188
29 июля 2018, 01:30

Есть блок с несколькими 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?

Answer 1

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() { ... });

Если же результаты изменений разных селектов должны быть различны, то решение будет иным.

READ ALSO
Передать значение с jquery в html

Передать значение с jquery в html

Есть вот такой скрипт который получает данные от instagramКак мне получив значение, она в виде ссылки, вставить ее в атрибут src img который находиться...

176
Как удалить script src с помощью Pure JS?

Как удалить script src с помощью Pure JS?

Как удалить такой тег? <script src="/page/somejs" type="text/javascript"></script>

174
Почему скрипт не работает в IE и Safari?

Почему скрипт не работает в IE и Safari?

Есть сайт который работает на chrome, mozilla, operaА в IE и safari выдает ошибку в этом файле

238
Использование LAN в приложениях

Использование LAN в приложениях

Есть несколько компов которые объединены одной локальной сетью через маршрутизаторКаждый из них должен отправлять данные на один комп

196