需要禁用复选框并使其看起来像被禁用（样式））

Question

我有一个 HTML 元素（复选框类型的输入），在我的模板中，我将以下内容添加到提到的 HTML 元素中：

<input type="checkbox" *ngFor="let status of statuses"
[class.disabled]="status==='Ready' && settings.length > 0 && !settings.includes(status)" [disabled]="status==='Ready' && settings.length > 0 && !settings.includes(status)">

现在，一切都按照我想要的方式完美运行，但我需要复制一个很长的条件：

"status==='Ready' && settings.length > 0 && !settings.includes(status)"

有没有更短的方法呢？

我不能只使用禁用，因为那样的话复选框确实会被禁用，但它看起来好像是活动的和启用的（即使它不能被选中）。

我不能只使用class.disabled，因为那样的话复选框看起来是禁用的，但如果我尝试检查它，我会成功（它只是看起来是禁用的，但实际上是启用的）。

有什么建议吗？

Answer 1

也许您可以使用

代替 css 文件中的 .disabled-selector

input[type="text"]:disabled { ... your css rules ...}

如果是，您可以删除 html.

中的 [class.disabled]="..."

Answer 2

Instead of checking all the condition "status==='Ready' && settings.length > 0 && !settings.includes(status)" in template, use component for this.

you can write a simple function in the component which return either true or false based on the condition
       function disableCheckBox() {
        if(status==='Ready' && settings.length > 0 && !settings.includes(status))
           return true;
        return false;
        }
and in the template 
    <input type="checkbox" *ngFor="let status of statuses"
    [class.disabled]="disableCheckBox()" [disabled]="disableCheckBox()">

Or Else create a single variable for that

需要禁用复选框并使其看起来像被禁用（样式））

Need both to disable a checkbox and make it look as it is disabled (style))

disabled-input

angular