From d7403a0241b90d5be5d6e308ab66363c5254cc69 Mon Sep 17 00:00:00 2001
From: ddchef <dev@xjie.me>
Date: Mon, 26 Feb 2018 14:22:29 +0800
Subject: [PATCH] [new feature]Checkbox: support disabled label (#644)

---
 docs/demos/views/checkbox.vue   |  9 +++++++++
 docs/markdown/zh-CN/checkbox.md |  5 +++++
 packages/checkbox/index.vue     | 10 +++++++---
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/docs/demos/views/checkbox.vue b/docs/demos/views/checkbox.vue
index e3962cf1b..b7555f1e4 100644
--- a/docs/demos/views/checkbox.vue
+++ b/docs/demos/views/checkbox.vue
@@ -9,6 +9,11 @@
       <van-checkbox :value="true" disabled>{{ $t('checkbox') }} 2</van-checkbox>
     </demo-block>
 
+    <demo-block :title="$t('labelDisabled')">
+      <van-checkbox v-model="checkbox3" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
+      <van-checkbox v-model="checkbox4" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
+    </demo-block>
+
     <demo-block :title="$t('title3')">
       <van-checkbox-group v-model="result">
         <van-checkbox
@@ -48,12 +53,14 @@ export default {
   i18n: {
     'zh-CN': {
       checkbox: '复选框',
+      labelDisabled: '禁用 Checkbox 内容部分点击事件',
       title3: 'Checkbox 组',
       title4: '与 Cell 组件一起使用',
       title5: '设置最大可选数',
     },
     'en-US': {
       checkbox: 'Checkbox',
+      labelDisabled: 'Disable Checkbox Label click event',
       title3: 'Checkbox Group',
       title4: 'Inside a Cell',
       title5: 'Maximum amount of checked options'
@@ -64,6 +71,8 @@ export default {
     return {
       checkbox1: true,
       checkbox2: true,
+      checkbox3: false,
+      checkbox4: true,
       list: [
         'a',
         'b',
diff --git a/docs/markdown/zh-CN/checkbox.md b/docs/markdown/zh-CN/checkbox.md
index 27cf5652a..3bad79df5 100644
--- a/docs/markdown/zh-CN/checkbox.md
+++ b/docs/markdown/zh-CN/checkbox.md
@@ -31,7 +31,11 @@ export default {
 ```html
 <van-checkbox v-model="checked" disabled>复选框 2</van-checkbox>
 ```
+#### 禁用内容部分点击事件
 
+```html
+<van-checkbox v-model="checked" label-disabled>复选框 3</van-checkbox>
+```
 #### Checkbox 组
 
 需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
@@ -93,6 +97,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
 | disabled | 是否禁用单选框 | `Boolean` | `false` | - |
+| label-disabled | 是否禁用单选框内容点击 | `Boolean` | `false` | - |
 | shape | 形状 | `String` | `round` | `square` |
 
 ### CheckboxGroup API
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index ba92c4cc0..54cebf158 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -10,7 +10,7 @@
       ]"
       @click="onClick"
     />
-    <span class="van-checkbox__label" @click="onClick">
+    <span class="van-checkbox__label" @click="onClick('label')">
       <slot />
     </span>
   </div>
@@ -28,6 +28,10 @@ export default create({
   props: {
     value: {},
     disabled: Boolean,
+    labelDisabled: {
+      type: Boolean,
+      default: false
+    },
     name: [String, Number],
     shape: {
       type: String,
@@ -96,8 +100,8 @@ export default create({
   },
 
   methods: {
-    onClick() {
-      if (!this.isDisabled) {
+    onClick(flag) {
+      if (!this.isDisabled && (flag !== 'label' || (flag === 'label' && !this.labelDisabled))) {
         this.currentValue = !this.currentValue;
       }
     }