twoknives

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

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

分类:

技术点:

相关文章:

  • 2021-06-23
  • 2021-11-23
  • 2021-11-07
  • 2021-11-23
  • 2021-12-07
  • 2022-12-23
  • 2021-04-11
猜你喜欢
  • 2021-11-26
  • 2021-12-05
  • 2022-12-23
  • 2021-11-23
  • 2021-07-18
  • 2022-12-23
相关资源
相似解决方案