Is there a way to stop a checkbox from being unchecked?

Ionic Framework
1

I am on Ionic Angular v7.8 I have checkboxes that I would like to essentially not uncheck. I have some specific logic that is on top of this but mostly I just want checkboxes to work fully based on the [checked] property. Is this possible?

<ion-checkbox [checked]="true">Test Box</ion-checkbox>

Take this example. Despite the checked property set to a constant of true, if I click on it, it will uncheck. I have tried using the onChange event to stop propogation and prevent default to no avail. Is it possible to keep this checkbox checked without disabling it?

The usefulness for this comes with additional logic, where under certain conditions I don’t want the user to be able to uncheck the checkbox.

2

Why don’t you want to disable it?

3

Disabled will visually change how I want it to look. this will also allow it to function like a radio. I just want the checkbox to maintain the checked property set

4

But disabled seems like exactly what you want to do. Why reinvent the wheel? You should be able to style the disable state any way you want.

5

I have a list of checkboxes where I want a minimum of 1 selected. So I don’t want them to be able to deselect all of them. If it’s the last one, it shouldn’t uncheck, it should act like it was simply selected. Disabling the last one is not in my opinion what I want to do and I don’t think it makes sense for the state of the DOM. That imo could mess up screen readers thinking a check is disabled and unclickable even though it really is a valid option, it just shouldn’t be unselected if it is the last one.

I don’t think wanting a component’s state to be based on its associated property is reinventing the wheel… unchecking the box is not changing the underlying data state and yet it visually acts like it does.

6

ion-radio doesn’t seem to allow multi-select and also doesn’t have decent styling so this is what i’m left with… literally just trying to make the checkbox component state based on the checked property.

right now I’m assuming I will have to manually access the IonComponent and write to its properties but that’s a headache especially with a variable list

7

I think you should do logic something like below:

catch the touchstart or mousedown event over the checkboxes
→ get event.target’s “checked” attribute && length of checked boxes == 1
→ event.preventDefault()

1 Like
8

I’m working in Ionic React, but I implemented something similar (three checkboxes, at least one must always be selected, so when only one is selected, it’s disabled).

In my case, since it’s a form, I keep track of which checkboxes are selected, and I set the disabled attributed to a function that returns whether the current checkbox is the only one selected. This, combined with some help text (“You must select at least one…”), seems to be working well enough for my app.

9

I couldn’t find any events that would stop the checkbox from shifting its visual state. So instead I just used ViewChildren to get the IonCheckbox component and manually set the checked property. I was looking a bit at the IonCheckbox component internals and it seems to me that it has something to do with event emitters and the decision of when to fire one that makes the state change even when the [checked] property remains constant. Setting the checked property of the component directly will cause an event to emit and a render. if I understand correctly

So I did something like this. I’m using Angular Mat collections so there is some hand waving.

@ViewChildren(IonCheckbox) checkboxes: QueryList<IonCheckbox>;

selectCheckbox(option, index) {
  this.selection.deselect(...this.options)
  this.selection.select(option);
  this.checkboxes[index].checked = true;
}