Question

请注意，我想避免使用jquery并仅使用Angular 2.就是说，这里是 PLUNK

我有一些自定义复选框，最初可以选择多个复选框。我将所选项目存储在这样的数组中：

    eventChkArr: any = [];
    updateChecked(value: any, event: any) {
        if (event.target.checked) {
          this.eventChkArr.push(value);
        }
        else if (!event.target.checked) {
          let index = this.eventChkArr.indexOf(value);
          this.eventChkArr.splice(index, 1);
        }
      }

当用户选择多个复选框时，弹出一个模态（由于某些原因，该模态不会在插件中弹出）并询问是否要选择多个复选框。现在，我想要做的是，如果用户点击没有按钮，那么只有最后点击的按钮才会保持模态弹出窗口，并且在用户的进一步点击时，将一次只选择一个复选框。如果他们点击“是”，则可以选择多个复选框。但是，我如何实现这一目标，任何帮助？ TIA。

Answer 1

https://plnkr.co/edit/yU4P3zsQ3QaH9Vby8M3I?p=preview

您可以将每个复选框的选中值保存在＆＃39; eventTypeChkBox＆＃39;阵列：

 eventTypeChkBox: Array<{chkBoxImageUrl: string, id: string, val: string, checked: boolean}> = [
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg" ,id: "item-1", val: "1", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-2", val: "2", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-3", val: "3", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-4", val: "4", checked: false}
  ];

现在您可以将＆＃39;的值设置为＆＃39;在每个复选框的[（ngModel）]中：

<div *ngFor="let eventChk of eventTypeChkBox">
   <div class="col-md-3">
      <label class="btn-custom">
          <img src="{{eventChk.chkBoxImageUrl}}" alt="{{eventChk.val}}" class="img-check img-circle" [ngClass]="{'check': eventChk.isClassVisible } "
                       width="100" height="100">
                  <input  [(ngModel)]="eventChk.checked" (ngModelChange)="onModelChange(eventChk) type="checkbox" name="{{eventChk.id}}" id="{{eventChk.id}}" value="{{eventChk.val}}" class="hidden" autocomplete="off"
                         (change)="updateChecked(eventChk, $event); eventChk.isClassVisible = !eventChk.isClassVisible;">
                </label>
                <p>{{eventChk.val}}</p>
              </div>
            </div>

**如果你想使用[（ngModel）]指令：

1.您应该导入＆＃39; FormsModule＆＃39;在您的“AppModule＆＃39;：

”中

import {FormsModule} from "@angular/forms";
@NgModule({
  imports: [ BrowserModule, FormsModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

2。你需要添加不同的名称＆＃39;每个＆＃39;复选框的属性＆＃39;输入，这就是我使用name =＆＃34; {{eventChk.id}}＆＃34;的原因。（你需要唯一的名字）在html里面

当你有[（ngModel）]时，你可以控制检查和不检查的内容。

如果要检测模型更改，可以使用（ngModelChange）=＆＃34; onModelChange（eventChk）＆＃34;在模板和课堂上：

 onModelChange(eventTypeChkBoxObj) {
    if(eventTypeChkBoxObj.checked) {
      if(this.getCheckedCount() == 2){
        let result = confirm("Multiple checkboxes?");
        if(!result) eventTypeChkBoxObj.checked = false;
      }  
    }

  }

要检查您不需要的项目值＆＃39; eventChkArr＆＃39;，您可以过滤它们：

getCheckedValues() {
   return this.eventTypeChkBox.filter(obj => obj.checked).map(obj => obj.val)
}

检查了obj计数：

 getCheckedCount():number{
    return this.getCheckedValues().length;
  }

例如：

 eventTypeChkBox = [{checked:true, val:1},{checked:true, val:2},{checked:false, val:3}]

getCheckedValues（）将返回：

["1","2"]

祝你好运！

Answer 2

我建议你这个逻辑：

<button *ngIf="eventChkArr.length > 1" (click)="popFisrtEvents()">Many choice ?</button>

和方法：

popFisrtEvents() {
    this.eventChkArr.splice(0, this.eventChkArr.lentgh -2);
}

因此，点击复选框时不会阻止用户...

Angular 2选择或取消选中条件下的复选框

2 个答案: