Question

我有一个要显示的项目列表，每个项目旁边都有一个复选框。我有条件声明来检查是否应禁用或启用每个项目的复选框。由于某些不清楚的原因，我的列表中的每个复选框都被禁用，我不确定它是如何设置[attr.disabled]或我的条件语句中的错误。

这是我的HTML：

 <input class="form-control" [attr.disabled]="disabled == true ? true : null"
     type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />

在我的组件中：

private disabled: boolean;

for( let item of items){
if (item.id == Status.required) {
                item.status = true;
                this.disabled= true;
            } else if (item.id != Status.required && item.list.length > 0) {
                item.status = item.id == Status.checked
                this.disabled= false;
            } else {
                item.status = item.id == Status.unchecked;
                this.disabled= false;
            }
    }

目前在我的列表中，无论我的项目状态如何，所有复选框都被禁用，并且不确定原因。

Answer 1

试试这个[disabled]

<input class="form-control" [disabled]="disabled == true ? true : null"
 type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />

Answer 2

试试这个

<input class="form-control" [ngClass]="{'disableDiv': disabled  === true}" 
     type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />

在css中

.disableDiv {
        pointer-events: none;
    }

Answer 3

感谢@NanditaAroraSharma我能够意识到每次列表项的状态发生变化时都会覆盖this.disabled，从而反映列表的最后状态并将其应用于所有项目。我更新了[attr.disabled] = "item.id == 1 ? true : null"，现在只禁用了真正禁用的项目。

Angular 2 attr.disabled表现不尽如人意

3 个答案: