Div cliquable au dessus d'un input

Bonjour,

J'ai une liste déroulante où la liste de choix (<div>) s'affiche au dessus d'une checkbox (<input>).
Le problème est que la checkbox reste sélectionnable quand elle est masqué par la liste déroulante.

J'ai utilisé z-index (css) pour afficher la liste déroulante au dessus de la checkbox.
Je n'ai pas envie de déplacer ma liste déroulante après ma checkbox dans le dom HTML.

J'ai pris une capture vidéo pour montrer le problème, existe t'il un attribut ou une méthode js pour résoudre le problème ?

La vidéo :
https://youtu.be/X8oZCwKCo54