Question

我的HTML页面包含3个多个选择字段（boostrap下拉组件）：

<select class="form-control bootstrap-select"
        data-style="alpha-grey-300 pt-5 pb-5 pl-10 text-size-mini" multiple
        id="associated.persons" data-live-search="true">
</select>
<select class="bootstrap-select"
        data-style="alpha-grey-300 pt-5 pb-5 pl-10 text-size-mini" multiple
        id="leave.interim.substitutes" data-live-search="true">
</select>
<select class="bootstrap-select"
        data-style="alpha-grey-300 pt-5 pb-5 pl-10 text-size-mini" multiple
        id="leave.interim.validators" data-live-search="true">
</select>

我想禁用最后2个选择字段（＆＃34; leave.interim.substitutes＆＃34;和＆＃34; leave.interim.validators＆＃34;）当从第一个选择中选择多个元素时字段（＆＃34; associated.persons＆＃34;）。使用jQuery的最佳方法是什么？

Answer 1

$("#associated.persons").change(function(){
    $("#leave.interim.substitutes, #leave.interim.validators").prop("disabled", ($(":selected", this).length == 1));
})

每次在$("#associated.persons").change中进行一组新选择时，

#associated.persons都会启动一个监听器（换句话说，只要有新值，内部函数就会触发。）

$("#leave.interim.substitutes, #leave.interim.validators")选择两个感兴趣的元素。 .prop("disabled", boolean)设置两个元素的disabled属性。如果true，请添加disabled=true如果false，则应删除disabled属性。

此布尔值由($(":selected", this).length == 1)确定，this是一个返回true或false的条件语句。 #associated.persons引用:selected元素，.length引用其中的任何选定选项。 ($(":selected", this).length == 1)因为jQuery中的多个元素只是一个数组。

所以:selected意味着如果jQuery只选择1个元素（该元素是loginID选项），则返回true。否则，返回false。

我将条件放在内部以减少行数，但它应该仍然相当可读。

Answer 2

您可以使用它来获取所选项目的长度： var count = $（“＃yourSelect：selected”）。length;

已停用

if (count > 1) {
            $('#yourSelect').attr('disabled', false);
        } else {
            $('#yourSelect').attr('disabled', true);
        }

从另一个选择字段

2 个答案: