Нужно как отключить флажок, так и сделать так, чтобы оно выглядело как отключено (стиль))

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

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

Answer 2

Возможно, вместо .disabled-selector в вашем css-файле вы можете использовать

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

Если да, вы можете удалить [class.disabled] = "..." в вашем html.