微信小程序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
    })
    
  },

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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
微信小程序中的checkbox组件可以让用户在多个选项中选择一个或多个选项。以下是一个基本的checkbox组件示例: ```html <checkbox-group> <label wx:for="{{items}}" wx:key="{{index}}"> <checkbox value="{{item.value}}" checked="{{item.checked}}" bindchange="checkboxChange">{{item.name}}</checkbox> </label> </checkbox-group> ``` 其中,`checkbox-group`是一个包裹多个`checkbox`的容器,`label`用于显示每个选项的名称,`checkbox`代表一个可选的选项。`value`是该选项的值,`checked`表示该选项是否被选中,`bindchange`是当该选项状态改变时的回调函数。 在js文件中,需要定义一个`items`数组来存储所有的选项: ```javascript Page({ data: { items: [ {name: '选项1', value: '1', checked: false}, {name: '选项2', value: '2', checked: false}, {name: '选项3', value: '3', checked: false}, ] }, checkboxChange: function(e) { var items = this.data.items; var checkedValues = e.detail.value; for (var i = 0; i < items.length; i++) { if (checkedValues.indexOf(items[i].value) !== -1) { items[i].checked = true; } else { items[i].checked = false; } } this.setData({ items: items }); } }) ``` 在`checkboxChange`函数中,通过`e.detail.value`获取用户选择的值,并根据选择的值更新每个选项的状态。最后,更新`items`数组并调用`setData`方法将其更新到页面中。 这是一个简单的checkbox组件示例,你可以根据自己的需求来自定义该组件。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值