From d96cc2c6b46638db0bce4bd9c1373fc48d94bc04 Mon Sep 17 00:00:00 2001
From: Abhishek Jasud <abhishek.jasud@bandhoo.com>
Date: Tue, 28 Oct 2025 22:53:52 +0530
Subject: [PATCH 1/2] Disable check on readonly

---
 src/ListRenderer/ChecklistRenderer.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/ListRenderer/ChecklistRenderer.ts b/src/ListRenderer/ChecklistRenderer.ts
index 34a13517..11bef98b 100644
--- a/src/ListRenderer/ChecklistRenderer.ts
+++ b/src/ListRenderer/ChecklistRenderer.ts
@@ -98,7 +98,10 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
           const checkbox = target.closest(`.${CheckListRenderer.CSS.checkboxContainer}`);
 
           if (checkbox && checkbox.contains(target)) {
-            this.toggleCheckbox(checkbox);
+            // Only toggle checkbox if not in read-only mode
+            if (!this.readOnly) {
+              this.toggleCheckbox(checkbox);
+            }
           }
         }
       });

From aae3edd1b4ba9223affcadca6410e716289b8da9 Mon Sep 17 00:00:00 2001
From: dev-null <devnull.pointer69@gmail.com>
Date: Wed, 5 Nov 2025 22:12:02 +0530
Subject: [PATCH 2/2] Package json version changed, added style based disabled
 checkbox

---
 package.json                          |  2 +-
 src/ListRenderer/ChecklistRenderer.ts | 16 ++++++++++++----
 src/styles/list.pcss                  |  4 ++++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index bc04c630..355fce4b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/list", 
-  "version": "2.0.8",
+  "version": "2.0.9",
   "keywords": [
     "codex editor",
     "list",
diff --git a/src/ListRenderer/ChecklistRenderer.ts b/src/ListRenderer/ChecklistRenderer.ts
index 11bef98b..7af63f75 100644
--- a/src/ListRenderer/ChecklistRenderer.ts
+++ b/src/ListRenderer/ChecklistRenderer.ts
@@ -34,6 +34,11 @@ interface ChecklistCssClasses extends ListCssClasses {
    * CSS class of the checkbox container
    */
   checkboxContainer: string;
+
+  /**
+   * CSS class for disabled checkbox check
+   */
+  checkboxCheckDisabled: string;
 }
 
 /**
@@ -61,6 +66,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
       noHover: `${CssPrefix}__checkbox--no-hover`,
       checkbox: `${CssPrefix}__checkbox-check`,
       checkboxContainer: `${CssPrefix}__checkbox`,
+      checkboxCheckDisabled: `${CssPrefix}__checkbox-check--disabled`,
     };
   }
 
@@ -98,10 +104,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
           const checkbox = target.closest(`.${CheckListRenderer.CSS.checkboxContainer}`);
 
           if (checkbox && checkbox.contains(target)) {
-            // Only toggle checkbox if not in read-only mode
-            if (!this.readOnly) {
-              this.toggleCheckbox(checkbox);
-            }
+            this.toggleCheckbox(checkbox);
           }
         }
       });
@@ -132,6 +135,11 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
       checkboxContainer.classList.add(CheckListRenderer.CSS.itemChecked);
     }
 
+    // Disable checkbox interaction in read-only mode
+    if (this.readOnly) {
+      checkboxContainer.classList.add(CheckListRenderer.CSS.checkboxCheckDisabled);
+    }
+
     checkbox.innerHTML = IconCheck;
     checkboxContainer.appendChild(checkbox);
 
diff --git a/src/styles/list.pcss b/src/styles/list.pcss
index b1d25b3b..65a547a9 100644
--- a/src/styles/list.pcss
+++ b/src/styles/list.pcss
@@ -159,6 +159,10 @@
         transform: scale(1);
         transition: transform 400ms ease-out, opacity 400ms;
       }
+
+      &--disabled {
+        pointer-events: none;
+      }
     }
   }
 }