Can the WeChat Mini Programs checkbox checkbox prevent it from being selected?

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
  </label>
</checkbox-group>
Page({
  data: {
    items: [
      {name: "USA", value: ""},
      {name: "CHN", value: "", checked: "true"},
      {name: "BRA", value: ""},
      {name: "JPN", value: ""},
      {name: "ENG", value: ""},
      {name: "TUR", value: ""},
    ]
  },
  checkboxChange(e) {
    console.log("checkboxchangevalue:", e.detail.value)
  }
})

this is an example of Mini Program checkbox. I hope that < checkbox value= "{{item.name}" checked= "{{item.checked}}" / > the selected status can be determined based on the data. For example, in the above code,

checkboxChange(e) {
    console.log("checkboxchangevalue:", e.detail.value)
    this.setData({
        // true 
       items[0]: {name: "USA", value: "", checked: true}
    })
  }
The effect of

is similar to the controlled component of react . Because it is necessary to judge some logic to confirm whether it can be selected before it is selected. But I just started to be Mini Program, and I found that it didn"t work. I don"t know what to do. I hope to judge some logic before changing the state after clicking the checkbox. Ask the boss for advice. Thank you


use the disabled property and set it as follows:
actions on DOM:

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

Data data structure:

items: [
      {name: 'USA', value: ''},
      {name: 'CHN', value: '', checked: 'true'},
      {name: 'BRA', value: '', disabled: true},
      {name: 'JPN', value: ''},
      {name: 'ENG', value: ''},
      {name: 'TUR', value: ''},
]

landlord, how did you solve it in the end? Is it to simulate a check box?

Menu