微信小程序勾选协议与提交按钮联动

在一些小程序的开发中有时会实现，未勾选相关协议，提交按钮是禁用状态，勾选相关协议，提交按钮变成可用状态。如下图所示：


主要用到开发文档按钮组件的一个属性；

代码：
wxml：

<!--相关协议-->
 <checkbox-group bindchange="bindAgreeChange">
      <label class="weui-agree" for="weuiAgree">
           <view class="weui-agree__text">
              <checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{}}" />
                <view class="weui-agree__checkbox-icon">
                     <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
                    </view>
                    阅读并同意<navigator url="" class="weui-agree__link">《相关条款》</navigator>
              </view>
          </label>
   </checkbox-group>
<!--提交按钮-->
<view class="weui-btn-area">
    <button class="weui-btn" type="primary"bindtap='submit'disabled='{{btn_disabled}}'>确定提交</button>
</view>

js：

 data：{
	/*按钮*/
    btn_disabled:true,
},
/**相关协议 法律文件 */
  bindAgreeChange:function(e) {
  //  console.log(e.detail.value)
    this.setData({
      isAgree:e.detail.value.length,
    })
    if (e.detail.value.length==1){
     this.setData({
       btn_disabled:false,
     })
   }else{
      //onsole.log(e.detail.value.length)
     this.setData({
       btn_disabled:true
     })
   }
  },

如此，可实现联动。