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

Question

我有一个使用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>

我正在使用onClick按钮的addIngredient通过jQuery通过Ajax提交表单。

我还试图将disabled属性添加到用户在单击保存按钮时选择的选项，以使他们无法再次选择该项目。

我不确定该如何处理，因为内容是动态创建的。

实际选择输出以供参考：

<div class="input-group input-group-lg">
    <select id="recipeIngredientSelect" class="custom-select custom-select-lg d-block">
        <option selected="selected" disabled="disabled">Select a recipe ingredient...</option>
        <option value="2">Chicken Thighs</option>
        <option value="3">English Mustard</option>
        <option value="4">Creme Freiche</option>
        <option value="5">Puff Pastry</option>
        <option value="6">Mushrooms</option>
        <option value="7">Vegetable Stock</option>
        <option value="8">Spring Onions</option>
    </select>
    <div class="input-group-append">
        <button type="button" id="addIngredient" class="btn btn-primary"><i class="fa fa-plus"></i></button>
    </div>
</div>

---

更新

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

这时，我想禁用选择中的选项，以使用户不能两次选择该项目。

Answer 1

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

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

一旦单击按钮，这将禁用选定的选项。因此，无法再次选择它。

希望有帮助！

Answer 2

类似这样的情况，其中$selected->id是用户选择的ID

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

Answer 3

我认为也许您只是想在元素添加到表中之后从选择中删除option（然后，如果从表中删除了option，则将其重新添加到选择中）。我不能再提供了，因为我不知道您用来将option添加到表中的代码。