zoukankan      html  css  js  c++  java
  • mpvue中限制多选框最多只能选两项

    每次点击的时候判断多选框选中的个数 如果已经选中两个  将所有未选中的项禁用

    <template>

      <checkbox-group class="radio-group" @change="checkChange">
        <checkbox class="checkbox" :value='item.id' v-for="item in treatment" :key="item" :disabled='isDisabled[index]'>{{item.name}}</checkbox>
      </checkbox-group>
    </template>
    import Vue from 'vue'
    export default {
      data () {
        return {
          personChange: [],
          isDisabled: [],
          checkId: []
        }
      },
      methods:{
        checkChange (e) {
          this.personChance = e.target.value
          for (let i = 0; i < this.checkId.length; i++) {
            if (e.target.value.length >= 2 && !e.target.value.includes(this.checkId[i].toString())) {
              Vue.set(this.isDisabled, i, true)
            } else if (e.target.value.length < 2) {
              Vue.set(this.isDisabled, i, false)
            }
          }
        }
      },
      onLoad(){
        wx.request({
          url: '',
          data: {},
          success (res) {
            console.log(res)
            that.treatment = res.data.data
            let isDisabled = []
            let checkId = []
            for (let i = 0; i < res.data.data.length; i++) {
              isDisabled.push(false)
              checkId.push(res.data.data[i].id)
            }
            that.isDisabled = isDisabled
            that.checkId = checkId
          }
        })
      }
    },
    <style lang="wxss">
    label.checkbox {
      padding-left: 20rpx;
    }
    checkbox .wx-checkbox-input{
       22rpx;
      height: 22rpx;
    }

    checkbox .wx-checkbox-input.wx-checkbox-input-checked{
      border: 1rpx solid transparent;
      background-color: #da2728;
    }
     checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
       22rpx;
      height: 22rpx;
      line-height: 22rpx;
      text-align: center;
      font-size:22rpx;
      color:#fff;
      background: transparent;
      transform: translate(-50%, -50%) scale(1);
      -webkit-transform: translate(-50%, -50%) scale(1);
    }
    </style>
  • 相关阅读:
    collections queue、os、datetime,序列化(json和pickle)模块
    re模块和正则
    模块介绍
    迭代器,生成器,生成器表达式,常用内置方法
    交互式shell和非交互式shell的区别
    /usr 的由来及/usr目录结
    Hadoop
    联通、联在中文机器上乱码问题
    正斜杠与反斜杠
    java中static关键字解析
  • 原文地址:https://www.cnblogs.com/ginelle/p/12155051.html
Copyright © 2011-2022 走看看