如果选中复选框,Vue.js 禁用/启用下拉菜单?
P粉714844743
P粉714844743 2023-08-29 23:14:07
[Vue.js讨论组]

我正在尝试启用/禁用下拉菜单:选中我的框时进行组合选择。 当我添加名称时它可以正常工作,但当选中无客户端时,它不能在编辑名称中工作。

应禁用下拉列表,因为选择了“无客户端”,并且仅当我取消选中该框时才应启用该下拉列表。但是,当选中该框时,下拉菜单将启用,而当我取消选中该框时,下拉菜单将被禁用。

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

请帮助我理解我的代码哪里出了问题。另外,如果您对我应该如何针对此问题进行不同的编码有任何建议,请告诉我!

P粉714844743
P粉714844743

全部回复(1)
P粉162773626

您可以在复选框上设置 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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号