Как включить кнопку при выборе элемента из раскрывающегося списка в js? - PullRequest
Новая
       4

Как включить кнопку при выборе элемента из раскрывающегося списка в js?

1 голос
/ 26 мая 2020

Этот фрагмент отображает два элемента выбора и кнопку отправки. Изначально кнопка отключена.

Желаемое поведение: включить кнопку отправки, когда для обоих элементов выбрана вторая опция (complete). Если для любого из элементов выбрана первая опция (received), отключите кнопку.

Текущее поведение: кнопка включена / отключена независимо от первого выбранного элемента. Значение: если я выберу опцию received в первом раскрывающемся списке и опцию complete во втором, кнопка будет включена, а не отключена. 

function enableButton() {
  var all_statuses = document.body.querySelectorAll(".selected > .form-control");
  var option_two = "complete";
  for (var i = 0; i < all_statuses.length; i++) {
    console.log(i + " This will work")
    if (all_statuses[i].value == option_two) {
      document.getElementById("btn_completed").disabled = false;
    } else document.getElementById("btn_completed").disabled = true;
  }
}

$(document).ready(enableButton);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="selected">
    <select class="form-control" id="select_one" onchange="enableButton()">
      <option value="received">received</option>
      <option value="complete">complete</option>
    </select>
    <select class="form-control" id="select_two" onchange="enableButton()">
      <option value="received">received</option>
      <option value="complete">complete</option>
    </select>
  </div>
</form>

<button id="btn_completed">Completed</button>

Итак, возникает вопрос: как включить кнопку, если для всех выбранных элементов выбрана опция complete, или как отключить кнопку, если хотя бы один У элемента select есть опция, отличная от complete selected?

1 Ответ

0 голосов
/ 15 июня 2020

рабочий код: 

<!DOCTYPE html>
<html>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="selected">
    <select class="form-control" id="select_one" onchange="enableButton()">
      <option value="received">received</option>
      <option value="complete">complete</option>
    </select>
    <select class="form-control" id="select_two" onchange="enableButton()">
      <option value="received">received</option>
      <option value="complete">complete</option>
    </select>
  </div>
</form>

<button id="btn_completed" disabled>Completed</button>

</body>
<script>
function enableButton() {
debugger;
  var all_statuses = document.body.querySelectorAll(".selected > .form-control");
  var option_two = "complete";

  var isdisabled = false;
  for (var i = 0; i < all_statuses.length; i++) {
    console.log(i + " This will work")
    if (all_statuses[i].value != option_two) {
      isdisabled = true;
      break;
    } 
  }

  if(isdisabled) {
    document.getElementById("btn_completed").disabled = true;
  }
  else {
document.getElementById("btn_completed").disabled = false;
    } 

}

$(document).ready(enableButton);
</script>
</html>
...