From b582fa5338ebee084c14ad35535b122258eee676 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Fri, 29 Mar 2024 23:44:10 +0800
Subject: [PATCH] fix(checkbox-group): dynamic modification of disabled
 attribute is invalid (#2647)

* fix(checkbox-group): dynamic modification of disabled attribute is invalid

* perf(checkbox): optimize tap event
---
 src/checkbox-group/checkbox-group.ts |  9 +++++++++
 src/checkbox/checkbox.ts             | 26 +++++++++++++++++---------
 src/checkbox/checkbox.wxml           | 10 +++++-----
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/checkbox-group/checkbox-group.ts b/src/checkbox-group/checkbox-group.ts
index 7d12aa07f..98c870a64 100644
--- a/src/checkbox-group/checkbox-group.ts
+++ b/src/checkbox-group/checkbox-group.ts
@@ -29,6 +29,15 @@ export default class CheckBoxGroup extends SuperComponent {
     options() {
       this.initWithOptions();
     },
+    disabled(v) {
+      if (this.data.options?.length) {
+        this.initWithOptions();
+        return;
+      }
+      this.getChildren().forEach((item) => {
+        item.setDisabled(v);
+      });
+    },
   };
 
   lifetimes = {
diff --git a/src/checkbox/checkbox.ts b/src/checkbox/checkbox.ts
index 9f8fa194f..3e18f968b 100644
--- a/src/checkbox/checkbox.ts
+++ b/src/checkbox/checkbox.ts
@@ -24,7 +24,7 @@ export default class CheckBox extends SuperComponent {
         const valueSet = new Set(value);
         const checkedFromParent = valueSet.has(this.data.value);
         const data: any = {
-          disabled: this.data.disabled == null ? disabled : this.data.disabled,
+          _disabled: this.data.disabled == null ? disabled : this.data.disabled,
         };
 
         if (borderless) {
@@ -62,6 +62,13 @@ export default class CheckBox extends SuperComponent {
   data = {
     prefix,
     classPrefix: name,
+    _disabled: false,
+  };
+
+  observers = {
+    disabled(v) {
+      this.setData({ _disabled: v });
+    },
   };
 
   controlledProps = [
@@ -73,16 +80,11 @@ export default class CheckBox extends SuperComponent {
 
   methods = {
     handleTap(e: WechatMiniprogram.TouchEvent) {
-      const { disabled, readonly } = this.data;
-
-      if (disabled || readonly) return;
-
+      const { _disabled, readonly, contentDisabled } = this.data;
       const { target } = e.currentTarget.dataset;
-      const { contentDisabled } = this.data;
 
-      if (target === 'text' && contentDisabled) {
-        return;
-      }
+      if (_disabled || readonly || (target === 'text' && contentDisabled)) return;
+
       const { value, label } = this.data;
       const checked = !this.data.checked;
       const parent = this.$parent;
@@ -93,5 +95,11 @@ export default class CheckBox extends SuperComponent {
         this._trigger('change', { context: { value, label }, checked });
       }
     },
+
+    setDisabled(disabled: Boolean) {
+      this.setData({
+        _disabled: this.data.disabled || disabled,
+      });
+    },
   };
 }
diff --git a/src/checkbox/checkbox.wxml b/src/checkbox/checkbox.wxml
index d78ae8016..812a9f54e 100644
--- a/src/checkbox/checkbox.wxml
+++ b/src/checkbox/checkbox.wxml
@@ -5,13 +5,13 @@
   class="{{_.cls(classPrefix, [placement, theme, ['checked', checked], ['block', block]])}} class {{prefix}}-class"
   aria-role="checkbox"
   aria-checked="{{checked ? (indeterminate ? 'mixed' : true) : false}}"
-  aria-disabled="{{disabled ? true : false}}"
+  aria-disabled="{{_disabled ? true : false}}"
   mut-bind:tap="handleTap"
   tabindex="{{tabindex}}"
 >
   <view
     wx:if="{{theme == 'default'}}"
-    class="{{_.cls(classPrefix + '__icon', [placement, ['checked', checked], ['disabled', disabled]])}} {{prefix}}-class-icon"
+    class="{{_.cls(classPrefix + '__icon', [placement, ['checked', checked], ['disabled', _disabled]])}} {{prefix}}-class-icon"
   >
     <slot name="icon" wx:if="{{icon === 'slot'}}" />
     <view wx:elif="{{_.isArray(icon)}}" class="{{classPrefix}}__icon">
@@ -34,14 +34,14 @@
       />
       <view
         wx:elif="{{!checked && (icon == 'circle' || icon == 'rectangle')}}"
-        class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', disabled]])}}"
+        class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])}}"
       />
       <view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
     </block>
   </view>
   <view class="{{classPrefix}}__content" data-target="text" mut-bind:tap="handleTap">
     <view
-      class="{{_.cls(classPrefix + '__title', [['disabled', disabled], ['checked', checked]])}} {{prefix}}-class-label"
+      class="{{_.cls(classPrefix + '__title', [['disabled', _disabled], ['checked', checked]])}} {{prefix}}-class-label"
       style="-webkit-line-clamp:{{maxLabelRow}}"
     >
       {{label}}
@@ -49,7 +49,7 @@
       <slot name="label" />
     </view>
     <view
-      class="{{_.cls(classPrefix + '__description', [['disabled', disabled]])}} {{prefix}}-class-content "
+      class="{{_.cls(classPrefix + '__description', [['disabled', _disabled]])}} {{prefix}}-class-content "
       style="-webkit-line-clamp:{{maxContentRow}}"
       >{{content}}<slot name="content"
     /></view>