微信小程序动态改变checkbox的选中状态

先看实现的效果

动态改变checkedbox

上代码

wxml:

 <checkbox-group class="checkrideo" bindchange="checkboxChange">
//wx:for循环渲染数组中各个对象的value字段的值，
    <label wx:for="{{vascular_risk_factors}}" wx:key="{{item.id}}">
      <view>
//checked属性控制item.value渲染与否
        <checkbox value="{{item.value}}" checked="{{item.isdisabled}}" > {{item.value}} </checkbox>
      </view>
    </label>
  </checkbox-group>

.js

Page({

  /**
   * 页面的初始数据
   */
  data: 
        vascular_risk_factors:[
              {id:1,value:'高血压',isdesabled:''},
              {id:2,value:'糖尿病',isdesabled:''},
              {id:3,value:'冠心病',isdesabled:''},
              {id:4,value:'房颤',isdesabled:''},
              {id:5,value:'无',isdesabled:''}
             ],

//事件函数
     checkboxChange:function(e)
  { 
    //使用for循环遍历用户的所有选中对象，判断是否选择了选项<无>
      for(let j=0, lenj=e.detail.value.length; j<lenj; j++)
      if (e.detail.value[j]=='无') {
        console.log("用户选择了<无>")
    //if成立，使用for循环将除了选项<无>之外的对象中的isdisabled属性置为空字符，空字符代表假
        for(let i=0, leni=this.data.vascular_risk_factors.length; i<leni-1; i++)
        {
          var obj = "vascular_risk_factors[" + i + "].isdisabled";//关键语句，改变isdisabled的属性
          this.setData({
                    [obj]:''    
          });
 
        }
      }
  },
})

wxss:

/* 选框样式-圆型 */
.checkrideo .wx-checkbox-input {
  border-radius: 50%;
  width: 70rpx;
  height: 70rpx;
}
/* 让对勾居中 */
.checkrideo .wx-checkbox-input.wx-checkbox-input-checked:before {
  font: normal normal normal 14px/1 "weui";
  content: "\EA08";
  font-size: 35px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.73);
  -webkit-transform: translate(-50%, -48%) scale(0.73);
}
/* 对勾的大小以及颜色 */
.checkrideo .wx-checkbox-input.wx-checkbox-input-checked::before{
  /* width: 20rpx;
  height: 10rpx;
  font-size:30rpx;  */
  color:blue;
}