0

Как сделать что бы при нажатии на кнопку Calculate, если некоторые select со значением 0, они выделялись красной рамкой, а они сейчас выделяются все, независимо от того с value=0 или нет. Выделяются красным даже выделенные:

var selectLength = $("#length");
var selectStudents = $("#students");
var selectDuration = $("#duration");
var selectValidity = $("#validity");
var selectQuantity = $("#quantity");
var selectIntro = $("#intro-class");

$("#button-result").on("click", function() {
  if (!!!selectLength.val() || !!!selectStudents.val() || !!!selectDuration.val() || !!!selectValidity.val() || !!!selectQuantity.val()) {
    $("select:not(#intro-class)").addClass("sel-color");
  } else {
    $("select:not(#intro-class)").removeClass("sel-color");
  }
});

$("#length, #duration, #quantity, #validity, #students").change(function() {
      if ($("select").val() != 0) {
        $(this).addClass('sel-color');
      } else {
        $(this).removeClass('sel-color');
      }

      $("#button-clear").click(function() {
        $("select").val('0');
        $('select').attr('disabled', false);
        $("#result-culc").html('');
      });

    }
  select {
    border: 3px solid #4A6695;
  }
  .sel-color {
    border: 3px solid #B80001;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-calc">
  <label for="length">French course</label>
  <select id="length" name="length">
    <option value="0">Choose</option>
    <option value="General">General Course</option>
    <option value="Exams">Exams Preparation</option>
    <option value="General">Conversational French</option>
    <option value="Exams">Business French</option>
    <option value="Exams">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">Choose</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">Choose</option>
    <option value="lesDur-30">30 minutes</option>
    <option value="lesDur-60">60 minutes</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="validity">Plan validity</label>
  <select id="validity" name="validity">
    <option value="0" selected="" disabled="">Choose</option>
    <option id="1mon" value="1month">One month</option>
    <option id="3mon" value="3months">Three months</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="quantity">Quantity of lessons</label>
  <select id="quantity" name="quantity">
    <option value="0" selected="" disabled="">Choose</option>
    <option id="q4" value="Quantity-4">4 lessons</option>
    <option id="q8" value="Quantity-8">8 lessons</option>
    <option id="q12" value="Quantity-12">12 lessons</option>
    <option id="q36" value="Quantity-36">36 lessons</option>
  </select>
</div>
<p id="warn">Please, fill in all the fields</p>

<div class="wrap-calc d-flex justify-content-between">
  <div id="button-clear" class="submit-block submit-block__culc">
    <p>Clear</p>
  </div>
  <div id="button-result" class="submit-block submit-block__culc">
    <p>Calculate</p>
  </div>
</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>

2 ответа 2

1

Как сделать что бы при нажатии на кнопку Calculate, если некоторые select со значением 0, они выделялись красной рамкой, а они сейчас выделяются все, независимо от того с value=0 или нет.

Вот такой вариант

var selectLength = $("#length");
var selectStudents = $("#students");
var selectDuration = $("#duration");
var selectValidity = $("#validity");
var selectQuantity = $("#quantity");
var selectIntro = $("#intro-class");

$("#button-result").on("click", function() {

  $('select').each(function(i) { // Проходит по всем селектам
    if ($(this).val() === '0') // Сравненте по "0"
      $(this).addClass('sel-color');
    else
      $(this).addClass('sel-color-success'); // Если все првально
  });
});

$("#length, #duration, #quantity, #validity, #students").change(function() {
  if (+$("select").val() !== 0) { // + переводит в цифры "0"
    $(this).addClass('sel-color');
  } else {
    $(this).removeClass('sel-color');
  }

})

$("#button-clear").on('click', function() {
  $('select').each(function(i) { // Проходит по всем селектам
    $(this).removeClass('sel-color sel-color-success').removeAttr('disabled').val('0');;
  });
  $("#result-culc").html('');
});
select {
  border: 3px solid #4A6695;
}

.sel-color {
  border: 3px solid #B80001;
}

.sel-color-success {
  border: 3px solid green;
}

#button-clear:hover,
#button-result:hover {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-calc">
  <label for="length">French course</label>
  <select id="length" name="length">
    <option value="0">Choose</option>
    <option value="General">General Course</option>
    <option value="Exams">Exams Preparation</option>
    <option value="General">Conversational French</option>
    <option value="Exams">Business French</option>
    <option value="Exams">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">Choose</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">Choose</option>
    <option value="lesDur-30">30 minutes</option>
    <option value="lesDur-60">60 minutes</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="validity">Plan validity</label>
  <!-------- Disable on select not on option -------->
  <select id="validity" name="validity" selected="" disabled="">
    <option value="0">Choose</option>
    <option id="1mon" value="1month">One month</option>
    <option id="3mon" value="3months">Three months</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="quantity">Quantity of lessons</label>
  <!-------- Disable on select not on option -------->
  <select id="quantity" name="quantity" selected="" disabled="">
    <option value="0">Choose</option>
    <option id="q4" value="Quantity-4">4 lessons</option>
    <option id="q8" value="Quantity-8">8 lessons</option>
    <option id="q12" value="Quantity-12">12 lessons</option>
    <option id="q36" value="Quantity-36">36 lessons</option>
  </select>
</div>
<p id="warn">Please, fill in all the fields</p>

<div class="wrap-calc d-flex justify-content-between">
  <div id="button-clear" class="submit-block submit-block__culc">
    <p>Clear</p>
  </div>
  <div id="button-result" class="submit-block submit-block__culc">
    <p>Calculate</p>
  </div>
</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>

0

$("select") у вас выбирает все селекты. Если вы хотите пройтись по каждому в отдельности, нужно использовать .each.

Примерно так

$("#length, #duration, #quantity, #validity, #students").change(function(){
  $("select").removeClass('sel-color');
  $("select").each(function(){
    if($(this).val() != 0){
      $(this).addClass('sel-color');
    }
  });
}):

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.