Отключить опцию выбора, которая создается динамически из БД

Question

У меня есть выпадающий список, созданный с помощью @foreach в Laravel Blade.

<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>

Я отправляю форму через Ajax с помощью jQuery, используя onClick кнопки addIngredient.

Я также пытаюсь добавить атрибут 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>

---

UPDATE

Следующая страница. Пользователь нажимает на выпадающий список и выбирает элемент. Когда они нажимают кнопку «плюс», она добавляется в таблицу ниже через приложение jQuery.

На данный момент я хочу отключить опцию в пределах выбора, чтобы пользователь не мог выбрать элемент дважды.

Answer 1

Я думаю, может быть, вы просто хотите удалить option из выбора после добавления элемента в таблицу (затем, если option будет удален из таблицы, добавьте его обратно в выбор). Я больше не могу дать, потому что я не знаю код, который вы используете для добавления option в таблицу.

Answer 2

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

option:selected Псевдоселектор CSS используется для выбора элемента option, выбранного в раскрывающемся списке.

Это отключает выбранную опцию после нажатия кнопки. Таким образом, он не может быть выбран снова.

Надеюсь, это поможет!

Answer 3

Примерно так: $selected->id - это идентификатор, который пользователь выбирает

.

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