从另一个选择字段中选择多个元素时禁用选择字段

Question

我的HTML页面包含3个多个选择字段(引导下拉组件)：

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

当从第一个选择字段("associated.persons")中选择了多个元素时，我想禁用最后两个选择字段("leave.interim.substitutes“和"leave.interim.validators")。使用jQuery做这件事的最佳方式是什么？

Answer 1

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

每次在#associated.persons中进行一组新的选择时，$("#associated.persons").change都会启动一个侦听器(换句话说，只要有新的值，内部的函数就会触发)。

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

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

因此，($(":selected", this).length == 1)意味着如果jQuery只选择了一个元素(该元素是:selected选项)，则返回true。否则，返回false。

我把条件放在里面以减少行数，但它仍然具有相当的可读性。

Answer 2

您可以使用它来获取所选项目的长度: var count = $("#yourSelect : selected ").length；

和禁用

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