javascript - 初始化一个不确定的复选框

Question

我需要创建一个 inderterminate checkbox以不确定状态开始。

为此，我在 HTML 中创建了一个复选框

<div *ngIf="item.CanSearch && item.SearchType === 'Bool'"><input type="checkbox" id="my-checkbox"  name="insideListResourceIdsCB" (click)="indeterminateCheckbox($event.target)" /></div>

当你点击复选框时，这个函数被调用(这部分工作没有任何问题)

/* function to create an indeterminate checkbox*/
public indeterminateCheckbox(cb) {       
    if (cb.readOnly) {
        cb.checked = cb.readOnly = false;
        this.insideListResourceIds = false;
    }
    else if (!cb.checked) {
        cb.readOnly = cb.indeterminate = true;
        this.insideListResourceIds = null;
    } else if (cb.checked) {
        this.insideListResourceIds = true;
    }
    this.getEmployeesOverview();
}

但是，当我加载我的 View 时，问题就来了。复选框需要具有不确定的视觉状态，这只能通过 javascript 实现。为此，我创建了这个函数:

ngAfterViewInit() {
        let checkbox = <any>$("#my-checkbox");
        checkbox.indeterminate = true;
}

但是每次我加载我的 View 时，我的复选框都是空的。但是，当我 console.log(checkbox) 结果是这样时，我没有收到任何错误:

我的问题是:如何在加载 View 时将复选框的视觉状态正确设置为 indeterminate？

Answer 1

我会利用属性指令来设置indetemate

@Directive({
  selector: 'input[type=checkbox][indeterminate]'
})
export class IndeterminateDirective {
  constructor(private elRef: ElementRef) {}

  ngOnInit() {
    this.elRef.nativeElement.indeterminate = true;
  }
}

现在你可以像这样使用它了

<input type="checkbox" indeterminate ...

Plunker Example

第二种方法可能只是使用属性绑定(bind)

[indeterminate]="true"

Plunker Example