Apply missing v-readonly style to CheckBoxGroup, when component is readOnly (#11370)

Setting read-only state to CheckBoxGroup should disable adding clicking effect. Missing v-readonly style is added to every CheckBox in the component, if it's set to read-only.

Fixes: https://github.com/vaadin/framework/issues/11113

* Add file missed from initial commit

* Verifying that option is enabled

Some of the options might be disabled on there own. Verify that option is not disabled, before removing disabled styles.

* Add missing test file

1 files changed, 14 insertions, 1 deletions

diff --git a/client/src/main/java/com/vaadin/client/ui/VCheckBoxGroup.java b/client/src/main/java/com/vaadin/client/ui/VCheckBoxGroup.java
index 9e213dfd4d..f6759111b0 100644
--- a/client/src/main/java/com/vaadin/client/ui/VCheckBoxGroup.java
+++ b/client/src/main/java/com/vaadin/client/ui/VCheckBoxGroup.java
@@ -137,6 +137,7 @@ public class VCheckBoxGroup extends FocusableFlowPanelComposite
         widget.setValue(
                 item.getBoolean(ListingJsonConstants.JSONKEY_ITEM_SELECTED));
         setOptionEnabled(widget, item);
+        setOptionReadOnly(widget, item);
         widget.setStyleName(CLASSNAME_OPTION_SELECTED, widget.getValue());
 
         if (requireInitialization) {
@@ -197,6 +198,18 @@ public class VCheckBoxGroup extends FocusableFlowPanelComposite
                 !isEnabled() || !optionEnabled);
     }
 
+    protected void setOptionReadOnly(VCheckBox checkBox, JsonObject item) {
+        if (isReadonly()) {
+            checkBox.addStyleName("v-readonly");
+            checkBox.setEnabled(false);
+        } else {
+            checkBox.removeStyleName("v-readonly");
+            boolean optionEnabled = !item
+                    .getBoolean(ListingJsonConstants.JSONKEY_ITEM_DISABLED);
+            checkBox.setEnabled(isEnabled() && optionEnabled);
+        }
+    }
+
     public boolean isHtmlContentAllowed() {
         return htmlContentAllowed;
     }
@@ -217,7 +230,7 @@ public class VCheckBoxGroup extends FocusableFlowPanelComposite
     public void setReadonly(boolean readonly) {
         if (this.readonly != readonly) {
             this.readonly = readonly;
-            optionsToItems.forEach(this::setOptionEnabled);
+            optionsToItems.forEach(this::setOptionReadOnly);
         }
     }