css - ionic 复选框 :checked not working angular 2 ionic 2

Question

我想在选中 ion-checkbox 时执行 css。但是 ion-checkbox:checked 不执行。

我想突出显示它下面的所有列。

这是我所做的。

**HTML文件

<ion-row class = "DefaultBundle">
    <ion-col col-4>Description of Services</ion-col>
    <ion-item col-4 style = "background-color: #84AEF9 !important;">
        <ion-label class = "Services">Full Service Agency</ion-label>
        <ion-checkbox class = "Bundle1"></ion-checkbox> // <-- Here's the check box
    </ion-item>
    <ion-item col-4 [hidden] = "!DefaultBundle.checked" style = "background-color: #84AEF9 !important;">
        <ion-label class = "Services">Frost & Co Lite</ion-label>
        <ion-checkbox class = "Bundle2"></ion-checkbox>
    </ion-item>
</ion-row>

以下是我要突出显示的一些字段。

<ion-row>
    <ion-col>Market Appraisal</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>
<ion-row>
    <ion-col>For Sale Board</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>
<ion-row>
    <ion-col>Rightmove Portal Listing</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>

这是我的 CSS。

.Bundle1:checked
{
    background-color: red; // <-- this is just for testing. And it never executes.
}

问题:我在这里缺少什么？

Answer 1

您假设 ion-checkbox 类似于 checkbox/radio 或 option 类型的简单 input .

:选中docs

The :checked CSS pseudo-class selector represents any radio (), checkbox (), or option ( in a ) element that is checked or toggled to an on state.

如果你看一眼 ion-checkbox组件代码，

'<div class="checkbox-icon" [class.checkbox-checked]="_value">' +
      '<div class="checkbox-inner"></div>' +
    '</div>' +
    '<button role="checkbox" ' +
            'type="button" ' +
            'ion-button="item-cover" ' +
            '[id]="id" ' +
            '[attr.aria-checked]="_value" ' +
            '[attr.aria-labelledby]="_labelId" ' +
            '[attr.aria-disabled]="_disabled" ' +
            'class="item-cover"> ' +
    '</button>',

显示时是一个按钮。

你需要创建一个自定义类

  .isChecked{
     background-color: red;
  }

并根据 bool 值动态使用 [class] 设置它。

 <ion-checkbox [class.isChecked] = "isCurrentCheckboxChecked"></ion-checkbox>