如何在多选下拉菜单中禁用 2 个选项并将该选项变灰答案

【问题标题】：How to disable 2 options in multiselect dropdown and grayout that option如何在多选下拉菜单中禁用 2 个选项并将该选项变灰
【发布时间】：2021-05-26 16:29:48
【问题描述】：

您好，我使用过 Angular8 和 bootstrap 4。我使用过 bootstrap 多选下拉菜单，我需要将 PL Marketing 和 CL Marketing 设为禁用并变灰。我已经尝试了各种方式，但无法禁用该选项并将其变灰。

TS：

  ngOnInit() {
    this.initEoForm();
    setTimeout(() => {
      $("#multiselectUser")
        .multiselect({
          buttonWidth: "400px"
        })
        .on("change", e => {
          let selectedFilename = $("#multiselectUser").val();
          selectedFilename = selectedFilename.filter(function(
            item,
            index,
            inputArray
          ) {
            return inputArray.indexOf(item) == index;
          });
          let selectedName = selectedFilename
            ? selectedFilename.toString()
            : "";
          this.getSelectedRoles(selectedName);
        });
    }, 100);
    setTimeout(() => {
      $('#assignedRoles option[value="124"]').prop("disabled", true);
      $('#assignedRoles option[value="123"]').prop("disabled", true);
    });
  }

HTML：

 <select name="user" id="multiselectUser" multiple="multiple" (change)="selecteduser($event)" [(ngModel)]="selectedUsers" >
              <option *ngFor="let field of user" [value]="field.id" >
                  {{field.label}}</option>
          </select>

DEMO

【问题讨论】：

您是否尝试在<option> 元素上使用[disabled]？
@ХристиянХристов 感谢您的回复，但我在这里循环值所以想通过 Ts 禁用
所以users[] 是来自某个后端的东西，您希望动态决定应该禁用该数组中的哪些字段，对吗？
还有其他人将 Angular 和 jQuery 混合在一起。请大家，stop doing that.

标签： javascript jquery angular

【解决方案1】：

我建议不要使用 jQuery 编辑 UI 来修改在 *ngFor 中可视化的 user[] 并添加一个名为 disabled 的字段。然后在您的模板中，您可以执行以下操作

 <select name="user" id="multiselectUser" multiple="multiple" (change)="selecteduser($event)" [(ngModel)]="selectedUsers" >
              <option *ngFor="let field of user" [disabled]="field.disabled" [value]="field.id" >
                  {{field.label}}</option>
          </select>

你的打字稿应该像这样改变

// 来自

   setTimeout(() => {
      $('#assignedRoles option[value="124"]').prop("disabled", true);
      $('#assignedRoles option[value="123"]').prop("disabled", true);
    });

// 到

   setTimeout(() => {
      this.user = this.user.map(x => {
        return {
          ...x,
          disabled: [123, 124].includes(x.id)
        };
      });

这也是stackBlitz 上的演示（我以您的示例为基础）

// 回答 cmets 您可以像这样添加自定义类并应用您需要的任何样式

    <option *ngFor="let field of user" [ngClass]="{'disabled-option': field.disabled}"  [disabled]="field.disabled" [value]="field.id" >
                  {{field.label}}</option>

为了启用这些选项，您只需再次遍历字段并更改禁用状态

** 重要

因为您使用第三方 linrary 进行选择，所以您必须在根 .css 文件中添加样式才能生效。

另外，由于您使用的库，您应该重新初始化选择组件，以便它重新呈现具有新状态的选项。

再看看我提供的stackblitz

【讨论】：

谢谢你的回答，有没有办法让这些值标签也变灰，我的意思是背景颜色改变？以及如何重新启用它？
检查编辑，无论如何我认为你应该做你自己的自定义下拉选择而不是使用这个插件，因为它看起来有点错误。
没有教程在 Angular 之上包含 jQuery（或者如果他们包含，他们不知道自己在做什么）。您的问题的解决方案是使用 Angular，或者使用 jQuery，但不能同时使用。
@ХристиянХристов 在我的情况下，我使用了反应式表单，但我无法根据禁用为真或假刷新 html，对此有何帮助？
您是否像我在我提供的 stackblitz 中那样调用以下函数 this.prepSelect();？