Vue.js disable/enable dropdown menu if checkbox is checked?

Question

I'm trying to enable/disable dropdown:combination selection when my box is checked. It works fine when I Add Name but when Clientless is selected, it doesn't work in Edit Name work.

The dropdown should be disabled because "Clientless" is selected, and should only be enabled if I uncheck the box. However, when the box is checked, the dropdown menu is enabled, and when I uncheck the box, the dropdown menu is disabled.

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"
/> 

Please help me understand what is wrong with my code. Also, if you have any suggestions on how I should code this problem differently, please let me know!

Answer 1

You can set v-model on the checkbox and use that value to disable the dropdown.

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>