改一个老项目,然后遇到了,记录下
先说下思路,给label绑定事件,点击时候判断是否达到限制,达到最大限制后把其他未选的禁用
<checkbox-group bindchange="check_wifi_change">
<view class=\'list\' wx:for=\'{{wifiList}}\' wx:key=\'index\' wx:for-item=\'item\'>
<view class="left_L">
<view class=\'item\'>
<text class=\'tx-lift\'>SSID:</text>
<text class=\'tx-right\'>{{item.SSID}}</text>
</view>
<view class=\'item\'>
<text class=\'tx-lift\'>BSSID:</text>
<text class=\'tx-right\'>{{item.BSSID}}</text>
</view>
<view class=\'item\'>
<text class=\'tx-lift\'>secure:</text>
<text class=\'tx-right\'>{{item.secure}}</text>
</view>
<view class=\'item\'>
<text class=\'tx-lift\'>signalStrength:</text>
<text class=\'tx-right\'>{{item.signalStrength}}</text>
</view>
</view>
<view class="right_L">
<label><checkbox value="{{index}}" bindtap="do_check_before" disabled=\'{{item.disabled}}\'>选择</checkbox></label>
<!-- <view class="btn_add" bindtap="addData" data-macid="{{item.BSSID}}">添加</view> -->
</view>
</view>
</checkbox-group>
js
//多选前
do_check_before:function(e){
let check_list = this.data.check_list;
let wif_list = this.data.wifiList
if(check_list.length >1){
wx.showToast({
title: \'最多选择3条\',
icon:\'none\'
});
wif_list.map(function(item,index){
item.disabled = true
})
check_list.map(function(item){
console.log(item)
wif_list[item][\'disabled\'] = false
})
console.log(check_list);
console.log(wif_list);
this.setData({
wifiList:wif_list
})
// return false;
}else{
wif_list.map(function(item,index){
item.disabled = false
})
this.setData({
wifiList:wif_list
})
}
},
// 多选
check_wifi_change:function(e){
// console.log(e.detail.value);
this.setData({
check_list :e.detail.value
})
},
效果