需要同时禁用复选框并使其看起来被禁用（样式））答案

【问题标题】：Need both to disable a checkbox and make it look as it is disabled (style))需要同时禁用复选框并使其看起来被禁用（样式））
【发布时间】：2019-06-29 01:30:45
【问题描述】：

我有一个 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，因为这样复选框会看起来像已禁用，但如果我尝试检查它，我会成功（它只是看起来像已禁用，但实际上已启用）。

有什么建议吗？

【问题讨论】：

将{ cursor: default; pointer-events: none; }添加到禁用类

标签： angular disabled-input

【解决方案1】：

也许你可以使用 .disabled-selector 而不是你的 css 文件中的

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

如果是，您可以删除 html 中的 [class.disabled]="..."。

【讨论】：

【解决方案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

【讨论】：

请注意 status 是 ngFor 的变量，它不是我的 ts 文件中的属性。我的意思是，我没有引用您在建议的 disbleCheckBox 函数中编写的状态变量
您可以将该状态作为参数传递给函数
谢谢@Ankur Jain 这绝对是一个更优雅的解决方案。现在，如果我必须更改条件，我将不得不更改一处而不是多处。