微信小程序checkbox 数量限制

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

效果
在这里插入图片描述
在这里插入图片描述

posted @ 2020-12-02 17:03  Twoknives_li  阅读(272)  评论(0)    收藏  举报