我一直在尝试使用 jQuery 代码在选择所有 html 选择下拉值时启用按钮,或者在未选择单个值时禁用按钮。
这是我到目前为止所尝试过的,但我的代码无法正常工作。有什么建议吗?
$(function() {
$('.picker').on('change', function() {
var SelectList = $('.picker');
//Here i'll find how many dropdown are present
for (var i = 0; i < SelectList.length; i++) {
//Here i need to check each dropdown value whether it selected or not
if (SelectList[i].val() != "") {
//If all dropdown is selected then Enable button
$("#Testing").attr("disabled", true);
} else {
//Disable button if any dropdown is not selected
$("#Testing").attr("disabled", false);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<select class="picker">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
<div>
<select class="picker">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
<div>
<select class="picker">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
<div>
<select class="picker">
<option value="">Select</option>
<option value="button-a">A</option>
<option value="button-b">B</option>
<option value="button-c">C</option>
</select>
</div>
<div>
<select class="picker">
<option value="">Select</option>
<option value="button-a">A</option>
<option value="button-b">B</option>
<option value="button-c">C</option>
</select>
</div>
<div>
<input id="Testing" type="button" class="btn btn-info" value="Testing" />
</div>
最佳答案
无需循环 - 我也会在(重新)加载时触发更改 onload 以禁用:
$(function() {
$('.picker').on('change', function() {
var $sels = $('.picker option:selected[value=""]');
$("#Testing").attr("disabled", $sels.length > 0);
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<select class="picker">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
<div>
<select class="picker">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
<div>
<select class="picker">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
<div>
<select class="picker">
<option value="">Select</option>
<option value="button-a">A</option>
<option value="button-b">B</option>
<option value="button-c">C</option>
</select>
</div>
<div>
<select class="picker">
<option value="">Select</option>
<option value="button-a">A</option>
<option value="button-b">B</option>
<option value="button-c">C</option>
</select>
</div>
<div>
<input id="Testing" type="button" class="btn btn-info" value="Testing" />
</div>
关于jquery - 选择多个下拉值时启用/禁用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36930775/