通过 Typescript 和 HTML 选择选项后，如何禁用整个选择下拉字段？

Posted 2023-02-22

【中文标题】通过 Typescript 和 HTML 选择选项后，如何禁用整个选择下拉字段？

【英文标题】：How can I disable an entire select dropdown field after selecting an option through Typescript and HTML?

【发布时间】：2021-07-22 09:51:03

【问题描述】：

我正在尝试做的事情：如果在此特定选择下拉列表中选择了一个选项，我希望禁用整个选择下拉列表。

我正在使用 Typescript，而且我对它很陌生，所以我想了解一下如何解决这个问题。

我的代码目前如下所示：

<button class="button default link small">
  <input
    :id="`item-$index`"
    :name="`item-$index`"
    type="checkbox"
    v-model="filteredItems[index].Enabled"
    @change="formUpdated('', index)"
  >
 <label :for="`status-$index`">Enabled</label>
</button>

<label class="bold">Item Type</label>
  <select required
     v-model="item.Type"
     :disabled="isDisabled(item)"
     @change="changeItemType('', index)"
     @keydown.enter="$event.stopPropagation()"
  >
  <option disabled value="" hidden>Select Item Type</option>
  <option v-for="(value, name) in supportedItems()" :key=value :value=value> name </option>

<script lang="ts">

private formUpdated(name: string, index: number): void 
    this.$set(this.formChanged, index, name);


private changeItemType(name: string, index: number): void 
    this.$set(this.formChanged, index, name);

    const itemType = this.items[index].Type;
    if (itemType === '') 
      this.items[index] = API.StoreInventory.Category.blank();
     else if (itemType === 'item_1') 
      this.items[index] = API.StoreInventory.Category.blankItem1();
     else if (itemType === 'item_2') 
      this.items[index] = API.StoreInventory.Category.blankItem2();
     else if (itemType === 'item_3') 
      this.items[index] = API.StoreInventory.Category.blankItem3();
     else 
      throw new Error('Item type not found');
    
  

private isDisabled(item: ItemCategory<AllItemTypes>): boolean 
    return !item.Enabled;
  
</script>

请注意，这只是一个字段，一旦选择了一个选项，其他字段不需要永久禁用。有一个按钮可以禁用和启用其他字段

到目前为止，我已经尝试过

<label class="bold">Item Type</label>
  <select required
     v-model="item.Type"
     :disabled="!value"
     @change="changeItemType('', index)"
     @keydown.enter="$event.stopPropagation()"
  >
  <option disabled value="" hidden>Select Item Type</option>
  <option v-for="(value, name) in supportedItems()" :key=value :value=value> name </option>

但它会在我选择一个选项之前禁用整个下拉列表。我希望能够在禁用整个下拉菜单之前选择一个选项。

我也试过添加

(document.getElementById('item.type') as htmlInputElement).disabled = true;

到changeItemType 方法，但由于它附加到changeItemType 回调，当我刷新窗口时，该项目在被禁用后变为启用。

知道我会怎么做吗？

【参考方案1】：

您可以将disabled 绑定到在change-event 回调中设置的标志：

<template>
  <select :disabled="isDisabled"
          @change="changeItemType('', index)">
    ...
  </select>
</template>

<script>
export default 
  data() 
    return 
      isDisabled: false,
    
  ,
  methods: 
    changeItemType(type, index) 
      //...

      this.isDisabled = true
    ,
  ,

</script>

demo

【讨论】：

嗨，谢谢！在changeItemType 方法中，当我添加this.isDisabled = true 时，它会显示Type 'boolean' is not assignable to type。总的来说，我对打字稿很陌生，对于任何菜鸟问题，我深表歉意。

该错误看起来不完整。通常它以变量的类型结束。但是isDisabled 在这个例子中显然是布尔值。你能显示你使用的确切代码吗？还是复制品的链接（例如，在 GitHub 中）？

嗨！实际上，我刚刚更新了帖子，使其更加深入。我没有复制链接，但我希望编辑已经足够了。

您添加的代码没有实现我的建议，因为changeItemType 没有设置isDisabled 标志。