<input id="sample" type="checkbox" checked><label for="sample">pointer-events: none;</label>
<br>
<img id="image" alt="edge-image-search-erasing_2" src="https://pg-himajin.com/wp-content/uploads/2023/09/page106-7.png">

<dialog id="dialog">
    <p>画像がクリックされました。</p>
    <button id="dialog-button">OK</button>
</dialog>

#sample:checked ~ #image {
    pointer-events: none;
}

input {
    width: 20px;
    height: 20px;
}

label {
    font-size: 24px;
}

#image {
    width: 300px;
}
const image = document.getElementById("image");
const dialog = document.getElementById("dialog");
const dialogButton = document.getElementById("dialog-button");

image.addEventListener("click", () => {
    dialog.showModal();
});

dialogButton.addEventListener("click", () => {
    dialog.close();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.