Disable toggle element while operation is in progress

- Prevent mod enable/disable toggle starting another process while one
  is already in progress
- Don't disable the input element itself, since this would show a
  disabled checkbox while the process is in progress, and I don't want
  to deal with the CSS right now
- Make switch ids unique

src/components/views/LocalModList/LocalModCard.vue

@@ -23,6 +23,7 @@ export default class LocalModCard extends Vue {
 
     disabledDependencies: ManifestV2[] = [];
     missingDependencies: string[] = [];
+    disableChangePending = false;
 
     get donationLink() {
         return this.tsMod ? this.tsMod.getDonationLink() : undefined;
@@ -69,11 +70,17 @@ export default class LocalModCard extends Vue {
     }
 
     async disableMod() {
+        if (this.disableChangePending) {
+            return;
+        }
+
+        this.disableChangePending = true;
         const dependants = Dependants.getDependantList(this.mod, this.localModList);
 
         for (const mod of dependants) {
             if (mod.isEnabled()) {
                 this.$store.commit('openDisableModModal', this.mod);
+                this.disableChangePending = false;
                 return;
             }
         }
@@ -89,9 +96,16 @@ export default class LocalModCard extends Vue {
                 severity: LogSeverity.ACTION_STOPPED
             });
         }
+
+        this.disableChangePending = false;
     }
 
     async enableMod(mod: ManifestV2) {
+        if (this.disableChangePending) {
+            return;
+        }
+
+        this.disableChangePending = true;
         const dependencies = Dependants.getDependencyList(mod, this.localModList);
 
         try {
@@ -105,6 +119,8 @@ export default class LocalModCard extends Vue {
                 severity: LogSeverity.ACTION_STOPPED
             });
         }
+
+        this.disableChangePending = false;
     }
 
     async uninstallMod() {
@@ -220,12 +236,12 @@ function dependencyStringToModName(x: string) {
             <span @click.prevent.stop="() => mod.isEnabled() ? disableMod() : enableMod(mod)"
                 class='card-header-icon'>
                 <div class="field">
-                    <input id="switchExample"
+                    <input :id="`switch-${mod.getName()}`"
                         type="checkbox"
-                        name="switchExample"
                         :class='`switch is-small  ${mod.isEnabled() ? "switch is-info" : ""}`'
                         :checked="mod.isEnabled()" />
-                    <label for="switchExample" v-tooltip.left="mod.isEnabled() ? 'Disable' : 'Enable'"></label>
+                    <label :for="`switch-${mod.getName()}`"
+                        v-tooltip.left="mod.isEnabled() ? 'Disable' : 'Enable'"></label>
                 </div>
             </span>
         </template>