Question

我使用knockoutjs自定义绑定创建了一个bootstrap-select选择器，我从我的flask视图中提供了数据，这是用户列表。我只需要从4个选项中选择2个。请查看我的选择标记

<select data-bind="selectPicker: selectPicking, selectPickerOptions: { options: allusers, optionsText: 'uname', optionsValue: 'uuid' }" data-live-search="true" multiple="true" ></select>

现在我得到了这个

enter image description here

我想只选择4个选项中的2个如何执行此操作，因此HTML或HTML5中没有选项大小属性，我可以在其中定义我只想从n个用户中选择4个用户。我是否需要为此编写一些淘汰代码或JS代码。

Answer 1

以下是如何限制所选复选框的计数：

Link to a fiddle for this

// Describes what an option is
var option = function(data){
    this.Name = ko.observable(data.Name);
    this.Selected = ko.observable(data.Selected);
}
var optionsVM = function(){
    var self = this;
    // Collection of options
    self.options = ko.observableArray();
    // Find out which items are selected
    self.selectedItems = ko.computed(function(){
        return ko.utils.arrayFilter(self.options(), function(item){
            return item.Selected() === true;
        });
    });
    // Dummy init to put options in the collection
    self.init = function(){
        self.options([
            new option({ Name : "Test 0", Selected: false }),
            new option({ Name : "Test 1", Selected: false }),
            new option({ Name : "Test 2", Selected: false }),
            new option({ Name : "Test 3", Selected: false }),
            new option({ Name : "Test 4", Selected: false })
        ])
    };

    self.canCheck = function(item){
        var _canCheck = self.selectedItems().length < 2;
        if (_canCheck){
            // If it can check then just toggle
            item.Selected(!item.Selected());
            return true;
        }
        if (!_canCheck && item.Selected()){
            // if it can't then only allow deselection
            item.Selected(false);
            return true;
        }
    }
}
var myOptions = new optionsVM();
myOptions.init();
ko.applyBindings(myOptions);

HTML：

<ul data-bind="foreach: options">
    <li><label><input type="checkbox" data-bind="click: $parent.canCheck, checked: Selected()" /> <span data-bind="text: Name"></span> <span data-bind="text: Selected"></span></label></li>
</ul>

<p data-bind="text: selectedItems().length"></p>

通过使用()

在视图中执行它，我已经对复选框的单向绑定（只读属性）进行了检查绑定这一事实。

有很多方法可以做到这一点，这只是一个。

bootstrap-select with knockoutjs binding选择2个选项中的2个

1 个答案: