CODEWITHSUNDEEP
jquerylaravel
n8udd
n8udd

Reputation: 721

Disable select option that is created dynamically from db

I have a select dropdown that is created using a @foreach in 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>

I am submitting the form via Ajax with jQuery using the onClick of the addIngredient button.

I'm also trying to add the disabled attribute to the option that the user selects when clicking on the save button, so that they cannot choose the item again.

I'm unsure how I go about this, with the content being created dynamically.

The actual select output for reference:

<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

The following is the page. The user clicks on the select dropdown, and chooses an item. When they click the plus button, it's added to the table below via jQuery append.

enter image description here

At this point, I want to disable the option within the select, so that the user can't select the item twice.

Upvotes: 0

Views: 1173

Answers (3)

Wolverine
Wolverine

Reputation: 1702

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

option:selected CSS pseudo selector is used to select the option element that is selected from the dropdown.

This disables the selected option once the button is clicked. So, it can't be selected again.

Hope it helps!

Upvotes: 1

Scotty G
Scotty G

Reputation: 424

I think maybe you just want to remove the option from the select after the element is added to the table (then if option is removed from the table add it back to the select). I can't give anymore because I don't know the code you are using to add the option to the table.

Upvotes: 0

Scotty G
Scotty G

Reputation: 424

Something like this where $selected->id is the id the user selects

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

Upvotes: 0

Related Questions