既需要禁用复选框,并使它看起来它被禁用(风格))

问题描述 投票:0回答:2

我有一个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,因为那时的复选框看起来为禁用,但如果我尝试检查它,我会成功的(它只是看起来禁用,但它实际上已启用)。

任何建议,好吗?

angular disabled-input
2个回答
0
投票
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

0
投票

也许不是在你的CSS文件的.disabled选择器,你可以使用

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

如果是的话,你可以删除[class.disabled] =“...”在你的HTML。

© www.soinside.com 2019 - 2024. All rights reserved.