目的:复选框未选中时,提交按钮为不可点击状态;复选框选中时,提交按钮为可点击状态
- 复选框未选中时
- 复选框选中时
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>
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
})
}
}
})
wxss
代码如下:
.foot-btn{
color: #ffffff;
background: #0091ff;
}
button.foot-btn[disabled]:not([type]){
color: #ffffff;
background: rgb(154, 189, 253)!important;
}
- 注意:
A. 以checkbox发生change事件携带value值
为是否选中的参考依据
B. checked未选中时,其属性为false或空,即checked: false或者checked: ''
C. disabled=true
时,表示禁用
状态;disabled=false
时,表示解除禁用
状态