微信小程序勾選協議與提交按鈕聯動

在一些小程序的開發中有時會實現，未勾選相關協議，提交按鈕是禁用狀態，勾選相關協議，提交按鈕變成可用狀態。如下圖所示：


主要用到開發文檔按鈕組件的一個屬性；

代碼：
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})}},

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。