Отключение других выпадающих списков при выборе значения в одном

Question

Я пытаюсь написать функцию, которая будет:

• Отключить кнопку отправки, если в выпадающем списке не выбран ни один параметр (т. Е. Выбрана пустая строка). Включить все выпадающие списки.
• При выборе пользователем параметра в раскрывающемся списке (который не является пустым строка), отключите все остальные выпадающие списки и включите кнопку отправки.

Однако, как новичок в JavaScript, я понятия не имею, как мне начать это. Как бы я написал такой код?

Итак, мой упрощенный HTML будет выглядеть следующим образом:

<form id="form" name="form" method="post" action="confirmation.cshtml">
   <select name="start_to_end_time" class="start_to_end_time">
      <option value="1">1</option>
      <option value="2">2</option>
   </select>

   <select name="start_to_end_time" class="start_to_end_time">
      <option value="3">3</option>
      <option value="4">4</option>
   </select>

   <button type="submit">Submit</button>

Как я могу написать код, который выполняет эту функцию?

Answer 1

Я думаю, что не стоит давать двум элементам HTML одинаковый атрибут name, если в нем не используются скобки []. Последний может перезаписать значение первого.

JavaScript с использованием MooTools:

$$('.start_to_end_time').each(function(element) {
    element.addEvent('click', function(ev) {
        $$('.start_to_end_time').each(function(selectbox) {

                if (element.getProperty('value') != '') {
                    $('button').setProperty('disabled', '');
                    $$('.start_to_end_time').each(function(b) {
                        if (b != element) {
                            b.setProperty('disabled', 'disabled');
                        } else {
                            b.setProperty('disabled', '');
                        }
                    }
                } else {
                    $('button').setProperty('disabled', 'disabled');
                    $$('.start_to_end_time').each(function(b) {
                        b.setProperty('disabled', '');
                    }
                }
        });
    });
});

Я не проверял код. Вы можете определить некоторые методы, чтобы сделать его более читабельным.

Answer 2

начните с загрузки кнопки как отключенной:

   <button id="myButton" type="submit" disabled='disabled'>Submit</button>

также, добавьте слушателя onchange к вашим опциям:

    <select onchange="myJSFunction()" name="start_to_end_time" class="start_to_end_time">
  <option value="3">3</option>
  <option value="4">4</option>

затем напишите JavaScriptфункция:

    function myJSFunction(){
     var myButton = document.getElementById('myButton');
     myButton.removeAttribute("disabled");
}

Чтобы проверить выбранное значение и отключить его соответствующим образом (это должно быть выполнено в функции, вызываемой методом onchange):

    var mySelect =document.getElementById('mySelect');
    var mySelectedIndex = mySelect.selectedIndex;
if (mySelectedIndex==0){
    mySelect.setAttribute("disabled","disabled);

}