单选复选框

Question

我想只允许在我的foreach循环中选择一个复选框，现在我可以选择多个。我有一个click事件但是当我选中复选框时，这不会取消选中其他复选框。这有什么不对？谢谢

<div class="consulting-editors" data-bind="foreach: ConsultingEditors">
    <input type="checkbox" name="Promote" data-bind="checked: Promote, click: $parent.promoterSelectedOnclick" /> Display as main editor 
</div>

ConsultingEditors: KnockoutObservableArray<NavigatorAuthorApi> = ko.observableArray();  

promoterSelectedOnclick = (selectedEditor: NavigatorAuthorApi) => {

    if (this.ConsultingEditors().some(e => e.Promote)) {
        this.ConsultingEditors().filter(e => e.AuthorRef != selectedEditor.AuthorRef).forEach((e) => {
            e.Promote = false;
        });
    }

    return this.ConsultingEditors();
}

export type NavigatorAuthorApi =
    {
        SortOrder: number,
        FirmRef: number,
        FirmName: string,
        AuthorRef: number,
        AuthorName: string,
        DisplayString: string,
        EditorImage: ByteString[],
        Promote: boolean
    }   

Answer 1

如果你想要改变财产来反映DOM，那么Promote应该是一个observable。

class viewModel {

  ConsultingEditors = ko.observableArray([
    { Promote: ko.observable(false), AuthorRef: 1},
    { Promote: ko.observable(false), AuthorRef: 2 },
    { Promote: ko.observable(false), AuthorRef: 3 }
  ]);

  promoterSelectedOnclick = (selectedEditor) => {
    this.ConsultingEditors().filter(e => e.AuthorRef != selectedEditor.AuthorRef).forEach((e) => {
      e.Promote(false);
    });
    return true;
  }
}

ko.applyBindings(new viewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="consulting-editors" data-bind="foreach: ConsultingEditors">
  <input type="checkbox" name="Promote" data-bind="checked: Promote, click: $parent.promoterSelectedOnclick" /> Display
</div>

Answer 2

两件事情，

1. 您需要使用click函数返回true，否则click绑定将与选中的绑定冲突。
2. Promote被用作布尔值，但它需要是UI的Observable才能对其值的任何更改做出反应。用户界面需要做出反应的所有内容都必须是可观察的淘汰赛。

function viewModel(){
    var self=this;

    self.ConsultingEditors = ko.observableArray([
    	new NavigatorAuthorApi(false, 1),
      new NavigatorAuthorApi(false, 2),
      new NavigatorAuthorApi(false, 3)
    ]);

    self.promoterSelectedOnclick = function(selectedEditor){
        if (self.ConsultingEditors().some(e => e.Promote())) {
            var others = self.ConsultingEditors().filter(e => e.AuthorRef != selectedEditor.AuthorRef);
            others.forEach((e) => {
                e.Promote(false);
            });
        }
        return true;
    }
}

function NavigatorAuthorApi(promote, authorRef)
{
		var self = this;
  	self.SortOrder = null;
    self.FirmRef = null;
    self.FirmName = null;
    self.AuthorRef = authorRef;
    self.AuthorName = null;
    self.DisplayString = null;
    self.EditorImage = null;
    self.Promote = ko.observable(promote);
}   
    
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="consulting-editors" data-bind="foreach: ConsultingEditors">
    <input type="checkbox" name="Promote" data-bind="checked: Promote, click: $parent.promoterSelectedOnclick" /> Display as main editor 
</div>