改一个老项目,然后遇到了,记录下
先说下思路,给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
})
},
效果