Как отключить значение одной опции выбора, сравнив три других значения опции выбора?

Question

У меня было четыре поля выбора. Оценивая значение трех опций выбора, некоторые из полей опций четвертого поля опций выбора должны быть отключены для пользователя.

первая опция выбора выглядит как

<select class="xyz" id="vadults" name="vadults">
       <option value="0" disabled selected> Number of Adults</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
</select>

второй вариант выбора выглядит как -

<select class="xyz" id="vchilds" name="vchilds">
        <option value="0" disabled selected>Number of Childs</option>
        <option value="0">No</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
</select>

третий вариант выбора выглядит как

<select class="xyz" id="vbeds" name="vbeds">
         <option value="0" disabled selected>Type of Bed</option>
         <option value="1">Single</option>
         <option value="2">Double</option>
</select>

Сравнивая значения трех вышеупомянутых полей выбора, некоторые из полей параметров из следующего выбора необходимо отключить. Правила для этого:

правило 1) если тип кровати односпальный, то не более одного взрослого могут использовать одну комнату, но общее количество взрослых и ребенка может быть два и т. Д.

правило 2) если тип кровати - двухместный, то не более двух взрослых могут использовать одну комнату, но общее количество взрослых и ребенка может быть три и т. Д.

Мне нужна помощь, чтобы отключить поле параметра из этого последнего выбора, значение которого меньше минимального значения числа требуемых комнат.

<select class="" id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

Я пытался следующим образом, но это не правильно, и это никуда не денется.

$(document).ready(function(){
   $(".xyz").change(function () {
         var adults = $("#vadults").val();
         var childs = $("#vchilds").val();
         var beds = $("#vbeds").val();
         var rooms = $("#vrooms").val();
         if(beds == 1){
            if(childs == 0){
               if(adults ==1){
                        }
               if(adults == 2){
                  $("#vrooms option[value="1"]").attr('disabled');
                  $("#vrooms option[value="2"]").removeAttr('disabled');
                  $("#vrooms option[value="3"]").removeAttr('disabled');
               }
               if(adults == 3){
                  $("#vrooms option[value="1"]").attr('disabled');
                   $("#vrooms option[value="2"]").attr('disabled');
                   $("#vrooms option[value="3"]").removeAttr('disabled');
                }
            }
         }
    });
 });

Answer 1

Я просто хочу поблагодарить всех за то, что вы поделились своими знаниями. Наконец, я могу выполнить эту задачу, и я хотел бы поделиться этим с вами, ребята.

    <select class="xyz" id="vadults" name="vadults">
       <option value="0" disabled selected> Number of Adults</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
    </select>

    <select class="xyz" id="vchilds" name="vchilds">
        <option value="0" disabled selected>Number of Childs</option>
        <option value="0">No</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
   </select>

    <select class="xyz" id="vbeds" name="vbeds">
         <option value="0" disabled selected>Type of Bed</option>
         <option value="1">Single</option>
         <option value="2">Double</option>
    </select>

    <select class="" id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
    </select>



    $('.xyz').change(function () {
                    var adults = $("#vadults option:selected").val();
                    var childs = $("#vchilds option:selected").val();
                    var beds = $("#vbeds option:selected").val();
                    var rooms = $("#vrooms option:selected").val();
                    if (beds == 1) {
                        if (adults == 1) {
                            $("#vrooms option[value='1']").removeAttr('disabled');
                            $("#vrooms option[value='2']").removeAttr('disabled');
                            $("#vrooms option[value='3']").removeAttr('disabled');
                            if (childs == 1) {
                                $("#vrooms option[value='1']").removeAttr('disabled');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 3 || childs == 2) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 4 || childs == 5) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 2) {
                            $("#vrooms option[value='1']").attr('disabled', 'disabled');
                            $("#vrooms option[value='2']").attr('selected', 'selected');
                            $("#vrooms option[value='2']").removeAttr('disabled');
                            $("#vrooms option[value='3']").removeAttr('disabled');
                            if (childs == 1 || childs == 2) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                            }
                            if (childs == 3 || childs == 4) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 3) {
                            $("#vrooms option[value='1']").attr('disabled', 'disabled');
                            $("#vrooms option[value='2']").attr('disabled', 'disabled');
                            $("#vrooms option[value='3']").attr('selected', 'selected');
                            $("#vrooms option[value='3']").removeAttr('disabled');
                            if (childs == 1 || childs == 2 || childs == 3) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 4 || childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 4) {
                            $("#vrooms option[value='1']").attr('disabled', 'disabled');
                            $("#vrooms option[value='2']").attr('disabled', 'disabled');
                            $("#vrooms option[value='3']").attr('disabled', 'disabled');
                            $("#vrooms option[value='4']").attr('selected', 'selected');
                            $("#vrooms option[value='4']").removeAttr('disabled');
                            if (childs == 1 || childs == 2 || childs == 3 || childs == 4) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                                $("#vrooms option[value='4']").removeAttr('disabled');
                            }
                            if (childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('disabled', 'disabled');
                                $("#vrooms option[value='5']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 5) {
                            $("#vrooms option[value='1']").attr('disabled', 'disabled');
                            $("#vrooms option[value='2']").attr('disabled', 'disabled');
                            $("#vrooms option[value='3']").attr('disabled', 'disabled');
                            $("#vrooms option[value='4']").attr('disabled', 'disabled');
                            $("#vrooms option[value='5']").attr('selected', 'selected');
                            $("#vrooms option[value='5']").removeAttr('disabled');
                            if (childs == 1 || childs == 2 || childs == 3 || childs == 4 || childs == 5) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('disabled', 'disabled');
                                $("#vrooms option[value='5']").attr('selected', 'selected');
                                $("#vrooms option[value='5']").removeAttr('disabled');
                            }
                            if (childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('disabled', 'disabled');
                                $("#vrooms option[value='5']").attr('disabled', 'disabled');
                                $("#vrooms option[value='6']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 6) {
                            $("#vrooms option[value='1']").attr('disabled', 'disabled');
                            $("#vrooms option[value='2']").attr('disabled', 'disabled');
                            $("#vrooms option[value='3']").attr('disabled', 'disabled');
                            $("#vrooms option[value='4']").attr('disabled', 'disabled');
                            $("#vrooms option[value='5']").attr('disabled', 'disabled');
                            $("#vrooms option[value='6']").attr('selected', 'selected');
                            if (childs == 1 || childs == 2 || childs == 3 || childs == 4 || childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('disabled', 'disabled');
                                $("#vrooms option[value='5']").attr('disabled', 'disabled');
                                $("#vrooms option[value='6']").attr('selected', 'selected');
                            }
                        }
                    }
                    if (beds == 2) {
                        if (adults == 1) {
                            $("#vrooms option[value='1']").removeAttr('disabled');
                            if (childs == 1 || childs == 2) {
                                $("#vrooms option[value='1']").removeAttr('disabled');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='1']").attr('selected', 'selected');
                            }
                            if (childs == 3 || childs == 4 || childs == 5) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                            }
                            if (childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 2) {
                            if (childs == 0) {
                                $("#vrooms option[value='1']").removeAttr('disabled');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='1']").attr('selected', 'selected');
                            }
                            if (childs == 1 || childs == 2 || childs == 3 || childs == 4) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                            }
                            if (childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 3) {
                            if (childs == 0 || childs == 1 || childs == 2) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 3 || childs == 4 || childs == 5) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 4) {
                            if (childs == 0) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 1 || childs == 2 || childs == 3) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 4 || childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 5) {
                            if (childs == 0 || childs == 1 || childs == 2 || childs == 3 || childs == 4) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 6) {
                            if (childs == 0 || childs == 1 || childs == 2 || childs == 3) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 4 || childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                    }
                });


      select option[disabled] {
                display: none;
            }

Если вы, ребята, хотите проверить это на JSFiddle проверить это JSFiddle для этой задачи

Answer 2

Вот код, который я сделал на основе вашего запроса:

$(document).ready(function(){
   $(".xyz").change(function () {
         var adults = $("#vadults").val();
         var childs = $("#vchilds").val();
         var beds = $("#vbeds").val();
         var rooms = $("#vrooms").val();
         
         if (beds == 1) { //if user picked single bed (Rule #1)
         	//alert("1");
          $("#vadults option").each(function() { //for each option in adult dropdown
          	if ($(this).index() > 0) { //if it's not the first default choice
              if ($(this).val() > 1) { //any adult greater than 1
                $(this).attr('disabled', 'disabled'); //disable (hide them)
              }
            }
          });
         }
         else { //if user picked double bed (Rule #2)
         	$("#vadults option").each(function() { //for each option in adult
            $(this).removeAttr('disabled'); //remove the disabled attr
          });
          $("#vadults option").each(function() { //for each option in adult dropdown
          	if ($(this).index() > 0) { //if it's not the first default choice
              if ($(this).val() > 2) { //any adult greater than 2
                $(this).attr('disabled', 'disabled'); //disable (hide them)
              }
            }
          });
         }
         if(beds == 1){
            if(childs == 0){
               if(adults ==1){
                        }
               if(adults == 2){
                  $("#vrooms option[value='1']").attr('disabled');
                  $("#vrooms option[value='2']").removeAttr('disabled');
                  $("#vrooms option[value='3']").removeAttr('disabled');
               }
               if(adults == 3){
                  $("#vrooms option[value='1']").attr('disabled');
                   $("#vrooms option[value='2']").attr('disabled');
                   $("#vrooms option[value='3']").removeAttr('disabled');
                }
            }
         }
    });
 });

select option[disabled] {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="xyz" id="vadults" name="vadults">
       <option value="0" disabled selected> Number of Adults</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
</select>
<select class="xyz" id="vchilds" name="vchilds">
        <option value="0" disabled selected>Number of Childs</option>
        <option value="0">No</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
</select>
<select class="xyz" id="vbeds" name="vbeds">
         <option value="0" disabled selected>Type of Bed</option>
         <option value="1">Single</option>
         <option value="2">Double</option>
</select>
<select class="" id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

Конечно, это просто обрабатывает запрос на смену кровати. Таким образом, вам придется включить другие изменения в раскрывающемся списке и отслеживать их, чтобы обновить и другие раскрывающиеся списки.

Я также использовал фрагмент кода CSS, чтобы скрыть отключенные опции, которые вы можете увидеть в скрипте.

Не самый эффективный способ, но он направляет вас в правильном направлении.

Answer 3

Вы неправильно устанавливаете атрибут disabled.

Ваш код просто пытается получить значение свойства disabled.

$("#vrooms option[value="1"]").attr('disabled');  // <-- Only "gets" the disabled attribute value

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

$("#vrooms option[value="1"]")  // <-- Can't nest double quotes inside of double quotes

Вам нужно использовать одинарные кавычки внутри двойников.

Наконец, JQuery устарел методы ярлыка события (т.е. .change()) некоторое время назад. Теперь они рекомендуют использовать метод .on() для привязки событий.

Вот упрощенный пример того, что вы пытаетесь сделать:

$(function(){
   // Use the .on() method to do event binding
   $("select").on("change", function () {
      let response = prompt("Enter 1 or 2");
      if(response === "1"){
        // To set a value, you have to pass two arguments
        // 1. The attribute you want to set
        // 2. The value you want to set
        $("#vrooms option[value='1']").attr('disabled', 'disabled');
        $("#vrooms option[value='2']").removeAttr('disabled');
        $("#vrooms option[value='3']").removeAttr('disabled');
       } else {
        $("#vrooms option[value='1']").attr('disabled', 'disabled');
        $("#vrooms option[value='2']").attr('disabled', 'disabled');
        $("#vrooms option[value='3']").removeAttr('disabled');
       }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

Answer 4

Код $("#vrooms option[value="1"]").attr('disabled'); извлекает только значение отключенного атрибута элемента $('#vrooms option[value="1"]'); попробуй

$('#vrooms option[value="1"]').prop('disabled', true);

-------------------------- ОБНОВЛЕНИЕ -------------------- ------

Из-за комментария Скотта я добавляю код:

$('#vrooms option[value="1"]').attr('disabled', 'disabled');

это все равно работает.

-------------------------- ОБНОВЛЕНИЕ -------------------- ------

для отключения опции и

$('#vrooms option[value="1"]').prop('disabled', false);

для включения опции. Тем не менее, я не думаю, что ваш правильный путь для решения проблемы. Вы могли бы скорее удалить опции, которые больше не могут быть выбраны пользователем.

-------------------------- ОБНОВЛЕНИЕ -------------------- ------

Я думаю, что подход Скотта к .prop() является законным, поэтому я обновил код следующим образом.