Ionic：如果满足特定条件，则在事件处理程序中选中复选框

Question

我有一个带有复选框的表单，对于某些复选框，以下内容适用：

当复选框被选中并被点击并且某些语句为真时，复选框不应取消选中，而是跳回到选中状态。

这是当前的 html:

<ion-item>
    <ion-label stacked  [innerHTML]="htmlString"></ion-label>
    <ion-checkbox (click)="checkboxClick($event)"></ion-checkbox>
  </ion-item>

这是当前的 .ts:

checkboxClick(e){
    var statement = true;

    if(statement){
    e.target.checked = true;
    }
  }

这是一个展示问题的 stackblitz：https://stackblitz.com/edit/ionic-tcxd55?file=pages%2Fhome%2Fhome.ts

Answer 1

我不明白 stackblitz 与你的问题有什么关系，但我看到你拼错了 "target":

  if(statement){
    e.target.checked = true;
    }

Answer 2

使用 (ionChange) 而不是 (click)

html

<ion-checkbox (ionChange)="checkboxClick($event)" checked></ion-checkbox>

ts

  checkboxClick(e){
    var statement = true;
    if(statement){
      e.checked = true;
    }
  }

Answer 3

下面对我有用

HTML:

<ion-item>
     <ion-label>Enable Face Plotting (More Processor intensive)</ion-label>
     <ion-checkbox color="danger" checked="{{facePlottingOption}}" (ionChange)="checkboxFacePlotting($event)">
     </ion-checkbox>
 </ion-item>

.TS 文件：

export class TabCapturePage {
facePlottingOption: boolean = false;

public checkboxFacePlotting(e) {
    if (e.currentTarget.checked) {
      console.log("=========FACE PLOTTING ENABLED");
      this.facePlottingOption = true;
    } else {
      console.log("=========FACE PLOTTING DISABLED");
      this.facePlottingOption = false;
    }
  }
}

Ionic：如果满足特定条件，则在事件处理程序中选中复选框

Ionic: Make checkbox checked in event handler if specific criteria are met

dom-events

ionic-framework

ionic2

ionic3

angular