CODEWITHSUNDEEP
javascripthtmlcsstypescriptvue.js
johnnyrocket33
johnnyrocket33

Reputation: 131

How can I disable an entire select dropdown field after selecting an option through Typescript and HTML?

What I'm trying to do: If an option is selected in this certain select dropdown, I would like for the entire select dropdown to be disabled.

I'm using Typescript and I'm pretty brand new to it, so I would like to get some insight on how to go about this.

My code currently looks like this:

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

Note that this is only one field, there are other fields that do not require permanent disabling once an option is selected. There is a button that disables and enables those other fields

So far, I've tried doing

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

but it disables the entire dropdown before I can select an option. I would like to be able to select an option before it disables the entire dropdown.

I've also tried adding

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

to the changeItemType method, but since it's attached to the changeItemType callback, when I refresh the window, the item becomes enabled after being disabled.

Any idea how I would go about in doing this?

Upvotes: 0

Views: 1072

Answers (1)

tony19
tony19

Reputation: 138216

You could bind disabled to a flag that is set in the change-event callback:

<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

Upvotes: 1

Related Questions