css - Angular 6 - 更改复选框样式是否被选中

Question

我有一个复选框列表，我想在选中的那个下划线。我的代码如下所示:

TS 文件:

currentQuarter: string;
quarters: Observable<MeseRiferimento[]>;
q1: MeseRiferimento = new MeseRiferimento();
q2: MeseRiferimento = new MeseRiferimento();

ngOnInit() {
q1.desc = "One";
q1.id = "1";

q2.desc = "Two";
q2.id = "2"

currentQuarter = q1.id;
quarters.of([q1, q2]);
}

isQuarterSelected(q: MeseRiferimento): boolean {
return this.currentQuarter === this.getKeyFromQuarter(q);
}

HTML 文件:

<div *ngFor="let q of quarters | async" class="col-1 my-auto m-stati">
<label class="custom-control custom-checkbox ra-check">
<input type="checkbox" class="custom-control-input" [ngClass]="{'checked': isQuarterSelected(q) }">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">{{q.descrizione}}</span>
</label>
</div>

CSS 文件:

.custom-control-input:checked~.custom-control-indicator {   
color: #fff;   
background-color: #3bb8eb; 
}

这些是这段代码的问题:
1. 当我加载页面时，默认选中的复选框正确地具有“已选中”类，但未应用 CSS，即它没有下划线
2. 当我手动选择一个复选框时，类“checked”正确应用并且 CSS 也适用
3. 当我手动选择另一个复选框时，类“checked”正确地从一个切换到另一个，但前者的 CSS 不更新，即前一个复选框仍然带有下划线

感谢您的任何建议。

Answer 1

.custom-control-input:checked~.custom-control-indicator

:checked 并不意味着它具有 checked 类，而是意味着它实际上已经过检查。如果要选择 checked 类，请使用点代替冒号:

.custom-control-input.checked~.custom-control-indicator