Question

我正在使用jquery multiselct插件https://plugins.jquery.com/multi-select/

在一个场景中，我需要选择一些默认值，然后禁用它们，这样就没有人可以删除它们。下面是我的代码，我根据某些条件选择了一些选项。

  $('#members_select3').find('option').remove().end()
    $.each(response.results, function (i, item) {
                        $('#members_select3').append($('<option>', { 
                            selected: function(){
                                if (**condition comes here**){
                                        return true;
                            },
                            value: item.uid,
                            text : item.contact,
                        }));
                    });

  enable_multi_select_search('members_select3');

现在按照文档，如果我在上面的代码中使用禁用选项，该选项将变为禁用但不会被选中 - 更多意味着该选项可供选择而不是默认选择。

$('#members_select3').find('option').remove().end()
$.each(response.results, function (i, item) {
    $('#members_select3').append($('<option>', { 
        selected: function(){
            if (**condition comes here**){
                    return true;
            }
        },
        value: item.uid,
        text : item.contact,
        disabled: function(){
            if (**condition comes here**){
                    return true;
            }
        }
    }));
});

enable_multi_select_search('members_select3');

插件的默认功能

function enable_multi_select_search(id_){
    // refresh previous multi select box
    $('#members_select3').multiSelect("destroy");

    // create new
    $('#'+id_).multiSelect({
        selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
        selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
        afterInit: function (ms) {
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function (e) {
                    if (e.which === 40) {
                        that.$selectableUl.focus();
                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function (e) {
                    if (e.which == 40) {
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function () {
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function () {
            this.qs1.cache();
            this.qs2.cache();
        }
    });
}

Answer 1

您应该区分disabled和readOnly：

disabled：该选项不可选，即使不是默认选项
readOnly：无法更改选项的状态（是否选中）

我想，你正准备迎接第二个。

修改：

也许你可以改变这样的插件（未经测试）：

       $('#members_select3').append($('<option>', { 
                selected: function(){
                    if (**condition comes here**){
                            return true;
                    }
                },
                value: item.uid,
                text : item.contact,
                disabled: false,
                readOnly: function(){
                    if (**condition comes here**){
                            return true;
                    }
                }
            }));
        });

发出swith jquery multiselect插件

1 个答案: