fix(Checkbox): support set disabled dynamic (#2748)

fix #2742

packages/checkbox-group/index.ts

@@ -1,5 +1,7 @@
 import { VantComponent } from '../common/component';
 
+type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
+
 VantComponent({
   field: true,
 
@@ -13,7 +15,7 @@ VantComponent({
     },
     unlinked(target) {
       this.children = this.children.filter(
-        (child: WechatMiniprogram.Component.TrivialInstance) => child !== target
+        (child: TrivialInstance) => child !== target
       );
     }
   },
@@ -32,16 +34,16 @@ VantComponent({
 
   methods: {
     updateChildren() {
-      (this.children || []).forEach((child: WechatMiniprogram.Component.TrivialInstance) =>
+      (this.children || []).forEach((child: TrivialInstance) =>
         this.updateChild(child)
       );
     },
 
-    updateChild(child: WechatMiniprogram.Component.TrivialInstance) {
+    updateChild(child: TrivialInstance) {
       const { value, disabled } = this.data;
       child.setData({
         value: value.indexOf(child.data.name) !== -1,
-        disabled: disabled || child.data.disabled
+        parentDisabled: disabled
       });
     }
   }

packages/checkbox/index.ts

@@ -38,6 +38,10 @@ VantComponent({
     }
   },
 
+  data: {
+    parentDisabled: false
+  },
+
   methods: {
     emitChange(value: boolean) {
       if (this.parent) {
@@ -48,15 +52,15 @@ VantComponent({
     },
 
     toggle() {
-      const { disabled, value } = this.data;
-      if (!disabled) {
+      const { parentDisabled, disabled, value } = this.data;
+      if (!disabled && !parentDisabled) {
         this.emitChange(!value);
       }
     },
 
     onClickLabel() {
-      const { labelDisabled, disabled, value } = this.data;
-      if (!disabled && !labelDisabled) {
+      const { labelDisabled, parentDisabled, disabled, value } = this.data;
+      if (!disabled && !labelDisabled && !parentDisabled) {
         this.emitChange(!value);
       }
     },

packages/checkbox/index.wxml

@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view class="van-checkbox custom-class">
   <view class="van-checkbox__icon-wrap" bindtap="toggle">
@@ -7,13 +8,13 @@
       wx:else
       name="success"
       size="0.8em"
-      class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
-      style="font-size: {{ utils.addUnit(iconSize) }};{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
+      class="{{ utils.bem('checkbox__icon', [shape, { disabled: disabled || parentDisabled, checked: value }]) }}"
+      style="{{ computed.iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) }}"
       custom-class="icon-class"
       custom-style="line-height: 1.25em;"
     />
   </view>
-  <view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">
+  <view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}" bindtap="onClickLabel">
     <slot />
   </view>
 </view>

packages/checkbox/index.wxs

@@ -0,0 +1,20 @@
+/* eslint-disable */
+var utils = require('../wxs/utils.wxs');
+
+function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
+  var styles = [['font-size', utils.addUnit(iconSize)]];
+  if (checkedColor && value && !disabled && !parentDisabled) {
+    styles.push(['border-color', checkedColor]);
+    styles.push(['background-color', checkedColor]);
+  }
+
+  return styles
+    .map(function(item) {
+      return item.join(':');
+    })
+    .join(';');
+}
+
+module.exports = {
+  iconStyle: iconStyle
+};