Checkbox readonly

Ionic Framework ionic-v3
1

Hello is there any solution to do a checkbox readonly and not disable ?

1 Like
2

you can put [disabled] = “true” after fill the checkbox

3

[disabled] = “true” will apply his “grey css” that’s what I would like to avoid…

4

Have you already tried something like that?

HTML

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" readonly />
    <br/>
    <input name="chkBox_2" type="checkbox" value="1" />
    <br/>
    <input id="submitBttn" type="button" value="Submit">
</form>

CSS

input[type="checkbox"][readonly] {
  pointer-events: none;
}
5

Will give a shot tomorrow

6

This may break in shadow dom (ionic 4)

Alternative, hacky, way would be to undo the user check action using ionChange event

7

ion-checkbox.checkbox-disabled {
opacity : 1;
}

8

I would suggest not doing this, because of the principle of least surprise. Users expect common controls to behave like they commonly do. Instead of a checkbox, how about using an icon set (I’m partial to Font Awesome, but I’m sure the Ionicons have some suitable options as well)? Choose a pair of icons that make sense for your app domain that would represent “on” and “off”, and switch between them depending on the state of the readonly boolean variable.