微信小程序勾選協(xié)議與提交按鈕聯(lián)動(dòng)

在一些小程序的開(kāi)發(fā)中有時(shí)會(huì)實(shí)現(xiàn)，未勾選相關(guān)協(xié)議，提交按鈕是禁用狀態(tài)，勾選相關(guān)協(xié)議，提交按鈕變成可用狀態(tài)。如下圖所示：


主要用到開(kāi)發(fā)文檔按鈕組件的一個(gè)屬性；

代碼：
wxml

<!--相關(guān)協(xié)議--><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">《相關(guān)條款》</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, }, /**相關(guān)協(xié)議 法律文件 */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})}},

總結(jié)

以上是生活随笔為你收集整理的微信小程序勾选协议与提交按钮联动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。