the issue with checkboxes and labels

Hi, I've got a page holding two new checkboxes. If the first checkbox (let's say "A") is marked, the second (let's call it "B") has to be unmarked and the other way around. I set the condition in the rules tab, in the page wizard, and each time I clicked on one of the boxes, the second became unavailable as it was projected. However, clicking on the labels of those boxes allowed for marking both of them! I thought I made a mistake and removed the condition.

Having known that both checkboxes are defined in diff array, I declared two schema attributes controlling if they are enabled/disabled. I also glued to the definition of checkboxes event-handlers in this way that each checkbox has its own click event-handler. Event handlers are defined in the section for methods.

Each event handler is responsible for controlling the state of the second checkbox if the first is marked/unmarked. And this time, it also works like a charm, but only when I click on checkboxes. Again when I click on labels of checkboxes, it's possible to mark both checkboxes at the same time. Moreover, it's impossible to handle click-events from these labels.

If it were "normal" js or ts I would handle that easily. Here, I'm running out of ideas. Could you advise me on how to achieve control on those labels, as well (to be precise, I need to have responsive labels to improve user experience)? What I've done wrong so far?