I want to execute css when ion-checkbox is checked. But ion-checkbox:checked never executed.
I want to highlight all column below it.
Here what I done.
**Html file
<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>
Here are some of the fields that I want to highlight.
<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>
Here's my css.
.Bundle1:checked
{
background-color: red; // <-- this is just for testing. And it never executes.
}
What I might be missing?
Aucun commentaire:
Enregistrer un commentaire