Vue.js Disable/enable dropdown if checkbox is checked?-CodePudding

I'm trying to enable/disable a dropdown: combo-select when my box is checked. It works correctly when I Add Name but not in Editing Name when No Client is checked.

The dropdown should be disabled because No Client is selected and should be enabled only when I uncheck the box. But the dropdown is enabled when the box is checked and when I uncheck the box the dropdown 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,
             }"
    
    @on-select-item="onTeamComboSelect" 
/>

Please help me understand where i am wrong with my code. Also, if you have any advice on how i should have coded differently for this problem, please let me know!

CodePudding user response：

You can set a v-model on the checkbox and disable the dropDown using that value.

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>

CodePudding user response：

You might use :disabled="noClient" in your <combo-select ... /> I guess.

But need to test, I'm not sure