多选框选中和置灰

<!-- 分享列表 -->
<view class='typeListBox' wx:if="{{isDep}}">
  <view class='wrap' style="background:url('{{image}}invitebg.gif');background-size: 100% 100%;height:87vh;width:234px;">
    <view class='nav'>
      <view>
        <image src="{{image}}invitetitle.gif" style="width: 103px;height: 8vh;margin: 3vh 65px 0;"></image>
      </view>
      <view>
        <image bindtap='cancelTeacher' src="{{image}}invitecancel.gif" style="width: 10vh;height: 10vh;margin-top: 4vh;margin-left: -4vw;"></image>
      </view>
    </view>
    <view class='checkbox-con'>
      <scroll-view scroll-y style="height: 58vh;margin-bottom: -4vh;" scroll-top="{{scrollTop}}">
        <checkbox-group bindchange="checkboxChange" class="checkbox-group">
          <view wx:for="{{checkboxArr}}" wx:key="name">

            <label class="checkbox" style="background: url({{item.image}});background-size: 100% 100%;margin-top:{{item.margintop}};margin-left:{{item.marginleft}};-webkit-filter:{{item.img1}} ; -webkit-filter:{{item.img2}} ;filter: {{item.img3}};filter: {{item.img4}};"
              class="checkbox" bindtap='checkbox' data-index="{{index}}" data-disabled="{{item.disabled}}">
              <checkbox value="{{item.userId}}" disabled="{{item.disabled}}" checked="{{item.checked}}" />
              <image id="profilePhotoPath" src="{{item.profilePhotoPath}}" />
              <view style="color: rgba(151, 76, 25, 1);width: 15vw;margin-top:3vh;margin-left:-2vw;font-size:11px">{{item.nickName}}</view>
            </label>
            <image wx:if="{{(index%3==0&&checkboxArr.length-index==1) || (index%3==1&&checkboxArr.length-index==1) || (index%3==2)}}" src="{{image}}invitecontent.gif" style="width: 182px;height: 19vh;margin-left: 3vw;" />
          </view>
        </checkbox-group>
      </scroll-view>
    </view>
    <view class='btn1'>
      <!-- <button size="mini" class='bgFFF' bindtap='cancelTeacher'>取消</button>
      <button size="mini" class='' style="margin-right:45px;" bindtap='confirmTeacher'>确定</button> -->
      <image bindtap='confirmTeacher' src="{{image}}shareteacher.gif" style="width: 120px;height: 40px;margin-left: 10px;"></image>
    </view>
  </view>
</view>

.typeListBox {
  z-index: 101;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* padding: 4vh 26vw; */
  background: rgba(0, 0, 0, 0.3);
  align-items: center;
  display: flex;
  justify-content: center;
}
.nav {
  display: flex;
  flex-direction: row;
  /* margin-bottom: 14px; */
  line-height: 16px;
}

.nav text {
  padding-bottom: 10px;
  flex: 1;
  text-align: center;
  font-size: 16px;
}

.nav text.active {
  color: #3eace2;
  /* border-bottom: 1rpx solid #3eace2; */
}

.wrap {
  padding: 10px 20px 10px 10px;
  border-radius: 5px;
  font-size: 13px;
  background-color: #fff;
  position: relative;
}

.checkbox-con {
  text-align: center;
  position: relative;
}

.checkbox-group view {
  float: left;
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px;
  box-sizing: border-box;
}

.checkbox {
  height: 20.3vh;
  width: 20.3vh;
  position: absolute;
  margin-left: 15px;
  margin-top: -0.2vh;
}

/* .checkbox-group{
  display: flex;
  flex-direction: row;
} */

.checked {
  /* color: #3eace2;
  background: rgba(49,165,253,0.08);
  border: 1rpx solid #3eace2; */
  background: url('./invitingteacher.gif');
}

.checkbox checkbox {
  display: none;
}

.checked-img {
  width: 28rpx;
  height: 28rpx;
  position: absolute;
  top: 0;
  right: 0;
}
#profilePhotoPath {
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  margin-top: 5vh;
  margin-left: 0.2vw;
}

.btn1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.btn1 button {
  flex: 1;
  background-color: #3eace2;
  color: #fff;
  height: 35px;
  line-height: 35px;
}

.btn1 button.bgFFF {
  margin-right: 40px;
  color: #666;
  background-color: #fff;
  margin-left: 45px;
}

//取消按钮
  cancelTeacher: function() {
    var that = this;
    this.setData({
      isDep: false,
      isShare: true,
    })
  },
  //老师列表
  checkbox: function(e) {
    if (e.currentTarget.dataset.disabled == true) {
      return
    }
    var that = this;
    var index = e.currentTarget.dataset.index; //获取当前点击的下标
    var checkboxArr = this.data.checkboxArr; //选项集合
    checkboxArr[index].checked = !checkboxArr[index].checked; //改变当前选中的checked值
    if (checkboxArr[index].checked) {  //被选中背景修改
      checkboxArr[index].image = this.data.image + "invitingteacher.gif";
    } else {
      checkboxArr[index].image = this.data.image + "inviteteacher.gif";
    }
    this.setData({
      checkboxArr: checkboxArr
    });
  },
  //选中老师id
  checkboxChange: function(e) {
    var checkValue = e.detail.value;
    if (checkValue.length == 0) {
      checkValue = ''
    }
    this.setData({
      checkValue: checkValue
    });
    console.log("checd", this.data.checkValue)
  },
  confirmTeacher: function() { // 确定
    var teacherList = this.data.checkValue;
    var soundRecordingId = this.data.soundRecordingId1;
    var that = this;
    console.log('teacherl', teacherList)
    if (teacherList) {
      var teachers = '';
      for (var i = 0; i < teacherList.length; i++) {
        teachers = teachers.concat(teacherList[i] + ',')
      }
      teachers = teachers.substr(0, teachers.length - 1)
      console.log(teachers)
      wx.request({
        url: ‘’,
        method: 'get',
        success: function(res) {
          console.log(res)
          if (res.data.code == 200) {
            that.setData({
              isDep: false,
              isShare: true,
            })
            wx.showToast({
              title: '分享成功',
              icon: 'success'
            })
          }
        }
      })
    } else {
      wx.showToast({
        title: '请选择老师~',
        icon: 'none'
      })
    }
  },
  //获取老师列表
  getTeacherList: function() {
    var that = this
    var studentId = wx.getStorageSync('userId');
    wx.request({
      url: ‘’,
      method: 'get',
      success: function(e) {
        const list = e.data.result.list;
        for (var i = 0; i < list.length; i++) {
          if (i % 3 == 0 && list.length - i != 1) {  //三个一行
            list[i].margintop = '2.5vh'
          } else if (i % 3 == 1 && list.length - i != 1) {
            list[i].margintop = '2.5vh';
            list[i].marginleft = '54px'
          } else if (i % 3 == 1 && list.length - i == 1) {
            list[i].margintop = '-0.5vh';
            list[i].marginleft = '76px'
          } else if (i % 3 == 2) {
            list[i].marginleft = '133px'
          }
          list[i].checked = false
          list[i].image = that.data.image + "inviteteacher.gif";
          list[i].nickName = decodeURIComponent(list[i].nickName) //转义带表情的昵称
          if (list[i].showFlag == 0) {  //已经分享过的置灰且不再被选中
            list[i].disabled = true
            list[i].img1 = "grayscale(100 %)"
            list[i].img2 = "grayscale(1)";
            list[i].img3 = "grayscale(100 %)";
            list[i].img4 = "filter: gray;";
          } else {
            list[i].disabled = false
          }
        }
        that.setData({
          checkboxArr: list,
          soundRecordingId1: soundRecordingId
        })
        console.log(list)
      }
    })
  },