具有三种状态的复选框答案

【问题标题】：Checkbox with three states具有三种状态的复选框
【发布时间】：2018-11-14 22:22:23
【问题描述】：

我正在尝试做一个具有三种状态的复选框。为此，我制作了一种方法，当单击它时，它会在状态之间导航。问题是该方法仅在 HTML 更改后调用。所以它在改变 HTML 的状态后进入我的方法，使得复选框的导航是错误的。

如何在 HTML 中更改之前让它调用我的方法？

状态之间的导航：

我的 HTML：

<div class="switch switch-group" [ngClass]="getClasses()"  appAttribute [states]="states" [attr.disabled]="(disabled == 'disabled') ? 'disabled' : null" >
  <input #inputSwitch type="checkbox" appAttribute [states]="states" class="switch-checkbox" (click)="changeState()">
  <label class="switch-label">Example</label>
</div>

我的component.ts：

  @ViewChild('inputSwitch') inputSwitch: ElementRef;

  changeState() {
    // Work
    if(this.states == 2) {    
      this.inputSwitch.nativeElement.checked == true ? false : true;
      console.log(this.inputSwitch.nativeElement.checked);      
    } 
    // Not work
    else if (this.states == 3) {
      switch(this.inputSwitch.nativeElement.checked)
      {
        case false:
          if(!this.inputSwitch.nativeElement.indeterminate) {
            this.inputSwitch.nativeElement.checked = true;
            break;
          } 
          else {
            this.inputSwitch.nativeElement.checked = false;            
            break;
          }
        case true:
          this.inputSwitch.nativeElement.indeterminate = true;
          break;
      }
    }
  }

【问题讨论】：

跳过复选框并创建一个在点击事件上在 3 种不同状态之间切换的控件不是更简单吗？

标签： html angular typescript angular2-forms

【解决方案1】：

感谢@Hagner，解决方案是创建一个控件，在点击事件时在 3 种不同状态之间切换。

HTML：

<div class="switch switch-group" [ngClass]="getClasses()"  appAttribute [states]="states" (click)="changeState()" [attr.disabled]="(disabled == 'disabled') ? 'disabled' : null" >
  <input #inputSwitch type="checkbox" appAttribute [states]="states" class="switch-checkbox">
  <span class="switch-warper">
  </span>
  <label class="switch-label">Example</label>
</div>

TS：

  changeState() {
    if(this.states == 2) {    
      if(this.inputSwitch.nativeElement.checked) {
        this.inputSwitch.nativeElement.checked = false;
      } else {
        this.inputSwitch.nativeElement.checked = true;
      }
    } 
    else if (this.states == 3) {

      switch(this.inputSwitch.nativeElement.checked)
      {
        case false:
          if(!this.inputSwitch.nativeElement.indeterminate) {
            this.inputSwitch.nativeElement.checked = true;
            break;
          } 
          else if(this.inputSwitch.nativeElement.indeterminate) {
            this.inputSwitch.nativeElement.checked = false;   
            this.inputSwitch.nativeElement.indeterminate = false;
            break;
          }
        case true:
          this.inputSwitch.nativeElement.checked = false;                    
          this.inputSwitch.nativeElement.indeterminate = true;
          break;
      }

    }

  }

SASS：

input[type=checkbox].switch-checkbox {
    display: none;
}

【讨论】：