如何在js中启用下拉项选择时的按钮？
如何在js中启用下拉项选择时的按钮？
提问于 2020-05-26 16:21:36
这段代码显示了两个选择元素和一个提交按钮。最初，按钮处于禁用状态。
所需行为:当两个元素都选择了第二个选项(complete)时，启用submit按钮。如果其中一个元素选择了第一个选项(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的选项，如何禁用该按钮？
回答 1
Stack Overflow用户
发布于 2020-06-16 02:05:24
工作代码：
<!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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62017599
复制相关文章
相似问题
腾讯云开发者
