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

【问题标题】：How can I disable an entire select dropdown field after selecting an option through Typescript and HTML?通过 Typescript 和 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 回调，当我刷新窗口时，该项目在被禁用后变为启用。

知道我会怎么做吗？

【问题讨论】：

标签： javascript html css typescript vue.js

【解决方案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 标志。