Question

我想创建一个包含三个选项的下拉列表

var viewModel = {

    items: ko.observableArray(['one', 'two', 'three'])
};

如果我点击一个，当前选中的项目“一”将被禁用，并且只有在我点击一个按钮时才会在下拉菜单中启用。有人可以帮我提供代码示例和逻辑。请示例代码只能在淘汰JS中没有jquery或javascript请。

Answer 1

如果您展示了自己尝试过的内容，那会更好。
有不同的方法来做到这一点。这是一种使用淘汰赛的方法：
示例：https://jsfiddle.net/kyr6w2x3/43/

HTML：

<select data-bind="foreach: items,value:selectedOption">
  <option data-bind="value: value, text:name, attr:{'disabled' :IsDisable}" ></option>
</select>
<input type="button" data-bind="click:btnClicked" value ="Click To enable one">

JS模型：

  function YourViewModel() {
    var self = this ;
    var options = [ {name: 'One' , value :'1'},{name: 'two' , value :'2'},{name: 'three' , value :'3'}];
    self.items = ko.observableArray();
    self.selectedOption = ko.observable();

    $.map(options, function (item) {
       self.items.push(new drowpDownOptionViewModel(item));
    });
    // subscribe to selected option 
    self.selectedOption.subscribe(function (newValue) {
        // if One is selected make it disable
        if(newValue == 1){
           ko.utils.arrayForEach(self.items(), function (item) {
              return item.IsDisable(item.value() == 1);
          });
        }
    }, self);

    self.btnClicked = function (){
    ko.utils.arrayForEach(self.items(), function (item) {
             item.IsDisable(false);
     });
    }
  }
 function drowpDownOptionViewModel (data){
    var self = this;
    self.name = ko.observable(data.name);
    self.value = ko.observable(data.value);
    self.IsDisable = ko.observable(false);
 }


ko.applyBindings(new YourViewModel());

更新了示例：https://jsfiddle.net/kyr6w2x3/44/

Knockout JS在选择后禁用下拉选项，并在单击按钮X后重新启用它

1 个答案: