Jquery 禁用从数据库动态创建的选择选项

我有一个选择下拉列表，它是使用Laravel Blade中的

@foreach

创建的

<div class="input-group input-group-lg">
  <select class="custom-select custom-select-lg d-block" id="recipeIngredientSelect">
    <option selected disabled>Select a recipe ingredient...</option>
    @foreach($recipe->ingredients as $ingredient)
      <option value="{{$ingredient->id}}">{{$ingredient->name}}</option>
    @endforeach
  </select>
  <div class="input-group-append">
    <button class="btn btn-primary" type="button" id="addIngredient"><i class="fa fa-plus"></i></button>
  </div>
</div>

---

更新

以下是页面。用户单击选择下拉列表，然后选择一个项目。当他们单击加号按钮时，它将通过jQuery append添加到下表中

---

此时，我想禁用select中的选项，这样用户就不能两次选择该项。

类似这样的内容，其中

$selected->id

是用户选择的id

@foreach($recipe->ingredients as $ingredient)
    <option value="{{$ingredient->id}}" @if($ingredient->id == $selected->id) disabled @endif>{{$ingredient->name}}</option>
@endforeach

@foreach（$recipe->components as$component）
id==$selected->id）禁用@endif>{{{$component->name}
@endforeach

我认为，在将元素添加到表中后，您可能只想从select中删除

选项

（如果从表中删除

选项

，则将其添加回select）。我不能再给出了，因为我不知道您用于将

选项添加到表中的代码

$('#addIngredient').on('click', function () {
    $('#recipeIngredientSelect option:selected').attr('disabled', '');
});

option:selected
CSS伪选择器用于选择从下拉列表中选择的
选项
元素

单击按钮后，将禁用所选选项。因此，无法再次选择它

希望有帮助
 我认为这不会起作用，因为点击按钮时页面不会被重新加载。信息只是保存到一个数组中，一旦用户单击finished按钮，该数组就会发送到控制器。
$('#addIngredient').on('click', function () {
    $('#recipeIngredientSelect option:selected').attr('disabled', '');
});