微信小程序之 判断CheckBox选中状态

目的：复选框未选中时，提交按钮为不可点击状态；复选框选中时，提交按钮为可点击状态

1. 复选框未选中时
   
2. 复选框选中时
   
3. wxml代码如下：

<view class="bottom">
  <view style="color:#999999;text-align:center;padding-bottom: 30rpx;">
    <checkbox-group bindchange="checkboxChange">
      <label class="checkbox">
        <checkbox value="cc" checked="{{checked}}" />同意并接受
      </label><text style="color:#0091ff" bindtap="agreement">《隐私协议》</text>
    </checkbox-group>
  </view>
  <button class="foot-btn" disabled="{{disabled}}">提交</button>
</view>

4. js代码如下：

Page({
  data: {
    checked: '',
    disabled:true
  },
  // 跳转页面 隐私协议
  agreement:function(){
    wx.navigateTo({
      url: ''
    }) 
  },
  // 判断复选框选中状态
  checkboxChange:function(e){
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
    let val = e.detail.value
    if(val.length>0){
      this.setData({
        checked:true,
        disabled:false
      })
    }else{
      this.setData({
        checked:false,
        disabled:true
      })
    }
  }
})

5. wxss代码如下：

.foot-btn{
  color: #ffffff;
  background: #0091ff;
}

button.foot-btn[disabled]:not([type]){
  color: #ffffff;
  background: rgb(154, 189, 253)!important;
}

6. 注意：
   A. 以checkbox发生change事件携带value值为是否选中的参考依据
   B. checked未选中时，其属性为false或空，即checked: false或者checked: ''
   C. disabled=true时，表示禁用状态；disabled=false时，表示解除禁用状态