如果選取複選框，Vue.js 停用/啟用下拉選單？

Question

我正在嘗試啟用/停用下拉選單：選取我的方塊時進行組合選擇。 當我加上名稱時它可以正常工作，但當選中無客戶端時，它不能在編輯名稱中工作。

應停用下拉列表，因為選擇了“無客戶端”，並且僅當我取消選取該框時才應啟用該下拉列表。但是，當選取該方塊時，下拉式功能表將啟用，而當我取消選取該方塊時，下拉式功能表將被停用。

data: {
  editSelect: true,
},
methods: {
  noClient()
      {
         this.editSelect = !this.editSelect;
      },

 <b-form-checkbox
    id="noName"
    v-model="team.nameId"
    name="noName"
    type="checkbox"
    :value="null"
    @change="noName()"
 />

 
 <combo-select
    id="nameBox"
    v-model="team.nameId"
    api-location="fetchTeamsByName"
    api-details-location="fetchTeamDetails"
    search-parameter="name"
    :additional-search-fields="additionalSearchField"
    :transformer="nameTransformer"
    :value="null"
    :config="{
              ...comboConfig,
              searchLabel: 'Search names',
              isEditable: editSelect,
             }"
    class="input input__typeahead"
    @on-select-item="onTeamComboSelect"
/> 

請幫我理解我的程式碼哪裡出了問題。另外，如果您對我應該如何針對此問題進行不同的編碼有任何建議，請告訴我！

Answer 1

您可以在複選框上設定 v-model 並使用該值停用下拉式選單。

const app = Vue.createApp({
  data() {
    return {
      checkBox: false
    }
  }
})

app.mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <input type="checkbox" v-model="checkBox" />
  <p>checkBox: {{checkBox}}</p>
  <select :disabled="!checkBox" name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

</div>