微信小程序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
    })
    
  },
效果
 
 
 
                     
                    
                 
                    
                
 
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号