JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type="checkbox" id="btnA" onchange="openFunctionA();">
FUNCTION A
</input>
<input type="checkbox" id="btnB" onchange="openFunctionB();">
FUNCTION B
</input>

<div id="map">
MAP
</div>

CSS

#map {
  background-color: grey;
  height: 300px;
  width: 500px;
}

JavaScript

var map = document.getElementById('map')
var btnA = document.getElementById('btnA')
var btnB = document.getElementById('btnB')

function openFunctionA() {
if($('#btnA').is(":checked")){
	 $('#btnB').attr('disabled', true)
   map.addEventListener('click', function(e){
     alert("THIS FUNCTION A")
    })
   } else {
 	$('#btnB').attr('disabled', false)  
   }
}

function openFunctionB() {
 if($('#btnB').is(":checked")){
	 $('#btnA').attr('disabled', true)
   map.addEventListener('click', function(e){
     alert("THIS FUNCTION B")
    })
   } else {
 	$('#btnA').attr('disabled', false)  
   }
}