diff --git a/packages/checkbox/index.less b/packages/checkbox/index.less
index 1f0df9d3..2f62da7e 100644
--- a/packages/checkbox/index.less
+++ b/packages/checkbox/index.less
@@ -1,7 +1,5 @@
 @import '../common/style/var.less';
 
-@checkbox-size: 20px;
-
 .van-checkbox {
   overflow: hidden;
   user-select: none;
@@ -14,15 +12,15 @@
   }
 
   &__icon {
-    box-sizing: border-box;
     display: block;
+    font-size: 14px;
     width: @checkbox-size;
     height: @checkbox-size;
-    border: 1px solid @gray-light;
     color: transparent;
-    font-size: 14px;
     text-align: center;
-    transition: .2s;
+    box-sizing: border-box;
+    border: 1px solid @checkbox-border-color;
+    transition: @checkbox-transition-duration;
 
     &--round {
       border-radius: 100%;
@@ -30,28 +28,31 @@
 
     &--checked {
       color: @white;
-      border-color: @blue;
-      background-color: @blue;
+      border-color: @checkbox-checked-icon-color;
+      background-color: @checkbox-checked-icon-color;
     }
 
     &--disabled {
-      border-color: @border-color;
-      background-color: currentColor;
-      color: @background-color;
+      border-color: @checkbox-disabled-icon-color;
+      background-color: @checkbox-disabled-background-color;
     }
 
     &--disabled&--checked {
-      border-color: @border-color;
-      background-color: @border-color;
+      color: @checkbox-disabled-icon-color;
     }
   }
 
   &__label {
-    margin-left: 10px;
+    color: @checkbox-label-color;
+    margin-left: @checkbox-label-margin;
 
     &--left {
-      margin: 0 10px 0 0;
       float: left;
+      margin: 0 @checkbox-label-margin 0 0;
+    }
+
+    &--disabled {
+      color: @checkbox-disabled-label-color;
     }
 
     &:empty {
diff --git a/packages/checkbox/index.wxml b/packages/checkbox/index.wxml
index ce388e9d..1659ba43 100644
--- a/packages/checkbox/index.wxml
+++ b/packages/checkbox/index.wxml
@@ -12,7 +12,7 @@
       custom-style="line-height: 20px;"
     />
   </view>
-  <view class="van-checkbox__label van-checkbox__label--{{ labelPosition }} label-class" bindtap="onClickLabel">
+  <view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">
     <slot />
   </view>
 </view>
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 81293627..be3adec4 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -37,6 +37,17 @@
 @button-bottom-action-primary-color: @white;
 @button-bottom-action-primary-background-color: @red;
 
+// Checkbox
+@checkbox-size: 20px;
+@checkbox-border-color: @gray-light;
+@checkbox-transition-duration: .2s;
+@checkbox-label-margin: 10px;
+@checkbox-label-color: @text-color;
+@checkbox-checked-icon-color: @blue;
+@checkbox-disabled-icon-color: @gray;
+@checkbox-disabled-label-color: @gray;
+@checkbox-disabled-background-color: @border-color;
+
 // Info
 @info-size: 16px;
 @info-color: @white;