javascript - 如何在多选下拉列表中禁用 2 个选项并将该选项设置为灰色

Question

嗨，我使用了 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

Answer 1

我建议不要使用 jQuery 编辑 UI 来修改 user[]在 *ngFor 中可视化并添加一个名为 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>

你的 typescript 应该像这样改变
//从

   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 的演示(我以你的例子为基础)
//回复评论
您可以像这样添加自定义类并应用您需要的任何样式

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

为了启用这些选项，您只需再次遍历字段并更改禁用状态
** 重要的
因为您使用第三方 linrary 进行选择，所以您必须在根目录中添加样式 .css文件以使其生效。
同样由于您正在使用的库，您应该重新初始化选择组件，以便它重新呈现具有新状态的选项。
再看看我提供的stackblitz