checkbox根据情况进行toast提示,并禁止选中

由于需求中需要在选中的个数超过一定数量需要给toast提示,没有使用disabled属性进行禁止值的改变,但是在使用过程中发现即使return false无法阻止选中(代码见1.1 普通方式)

1.1 普通方式

• wxml

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}" wx:key="index">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>

• js

Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ],
    max: 3, // 最多可选
    selectItems: [] // 已选值
  },
  checkboxChange: function (e) {
    const { value: values } = e.detail
    const { max, items } = this.data

    if (values.length > max) {
      wx.showToast({
        title: `最多可选${max}个选项`,
      })
      return false // 无法阻止被选中    
    }
    
    // 重置选项标记,给已选的添加标记
    for (let i = 0, lenI = items.length; i < lenI; i++) {
      const item = items[i]
      item.checked = false
      for(let j = 0, lenJ = values.length; j < lenJ; j++) {
        if (item.name === values[j]) {
          item.checked = true
          break;
        }
      }
    }
    // 取出已选的选项
    const selectItems = items.filter(v => {
      return v.checked
    })
    
    this.setData({
      items: items,
      selectItems: selectItems
    })
  }
})

以上方式是无法阻止选中的

1.2 优化方式

在事件处理中,判断选中的值是否最大值,如果超过,将最后的一个值进行丢弃,重新赋值,刷新视图

• wxml

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}" wx:key="index">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>

• js

Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ],
    max: 3, // 最多可选
    selectItems: [] // 已选值
  },
  checkboxChange: function (e) {
    const { value: values } = e.detail
    const { max, items } = this.data

    if (values.length > max) {
      wx.showToast({
        title: `最多可选${max}个选项`,
      })
      values.pop() // 移除最新的一个值
    }
    
    // 重置选项标记,给已选的添加标记
    for (let i = 0, lenI = items.length; i < lenI; i++) {
      const item = items[i]
      item.checked = false
      for(let j = 0, lenJ = values.length; j < lenJ; j++) {
        if (item.name === values[j]) {
          item.checked = true
          break;
        }
      }
    }
    // 取出已选的选项
    const selectItems = items.filter(v => {
      return v.checked
    })
    
    this.setData({
      items: items,
      selectItems: selectItems
    })
  }
})