如何在js中选择下拉项目时启用按钮？
Posted
技术标签:
【中文标题】如何在js中选择下拉项目时启用按钮？【英文标题】：How to enable button upon dropdown item selection in 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，#在选择器中使用时需要转义
将初始设置为启用，如果其中一些值不正确，则禁用它并使用中断；否则它将继续循环，最后一项将决定它是启用还是禁用。
【参考方案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>
【讨论】：
以上是关于如何在js中选择下拉项目时启用按钮？的主要内容，如果未能解决你的问题，请参考以下文章
启用 scrollX 时，包含按钮下拉列表的行会导致垂直滚动
单击 jquery-tabledit 中的编辑按钮时如何启用下拉选择框？