如何在js中选择下拉项目时启用按钮？答案

【问题标题】：How to enable button upon dropdown item selection in js?如何在js中选择下拉项目时启用按钮？
【发布时间】：2020-09-12 23:42:43
【问题描述】：

这个 sn-p 显示两个选择元素和一个提交按钮。最初，按钮被禁用。

期望的行为：当两个元素都选择了第二个选项 (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，如何启用按钮，或者如果至少一个选择元素的选项不同于complete，如何禁用按钮？

【问题讨论】：

如果您想使用脚本提交表单，请不要在表单="submit" 中调用任何内容。如果您测试服务器上是否存在按钮，禁用提交按钮也会停止提交
不太确定您要做什么，但您是否多次设置启用和禁用相同的按钮？也许你应该使用 break;曾经禁用过？
您显示的选择字段包含两个选项，其值为 item_one 和 item_two，但您将选择字段的值（由所选选项产生）与 @987654332 进行比较@?您的描述中是否缺少某些内容，例如这些选项值被其他东西动态设置/更改，或者......？
1.在我所做的 sn-p 中出现控制台错误（缺少 btnComplete 的定义） 2. 表单上没有 onload 属性 3. 永远不要调用任何东西 submit 4. 无论您调用什么 submit 都从您的代码中丢失。 5 为什么选择ID？ 6. 为什么不是普通的ID，#在选择器中使用时需要转义
将初始设置为启用，如果其中一些值不正确，则禁用它并使用中断；否则它将继续循环，最后一项将决定它是启用还是禁用。

标签： javascript html list for-loop

【解决方案1】：

工作代码：

<!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>

【讨论】：