使用jquery禁用上一个所选项目以防止重复行

Question

我动态添加了多行，在我的附加行中有一个选定的框。

我有下面的脚本和视图，它动态地添加了多行。

$("body").on("click", ".add_new_frm_field_btn", function() {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
//added data-index and outer..class
$(".form_field_outer").append(
`<div class="col-12 outer" data-index="${index}_${random}">
<div class="card-body form_field_outer_row"> 
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[${index}][id_casting]" id="id_casting">
<option selected>Choose...</option>
@foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
@endforeach
</select>
</div>  
<div class="card-body">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer  ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[1][id_casting]" id="id_casting">
<option selected>Choose...</option>
@foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
@endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
<button type="button" class="btn btn-primary btn-lg top-right-button mr-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</div>
<div class="casting_details">
<div class="casting_details2">
<div class="d-flex flex-row mb-6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

我希望当我从第一个附加行中选择一个项目时，应该为所有接下来的附加行禁用该项目，以防止重复行。

目标是禁用前几行中所有选定的项目。

如果你知道我该怎么做的话，我会很高兴的。

Answer 1

这里有一种方法-创建一个单独的函数，以便在每次更改选择项时运行。您需要使其成为委托侦听器，因为选择是动态创建的，并且每次更新选择菜单和/或创建新的选择菜单时都需要运行该函数。

我替换了你选择的测试的选项

$("body").on("click", ".add_new_frm_field_btn", function() {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
//added data-index and outer..class
$(".form_field_outer").append(
`<div class="col-12 outer" data-index="${index}_${random}">
<div class="card-body form_field_outer_row"> 
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select  class="form-control maintCostField"  name="rows[${index}][id_casting]" id="id_casting" >
<option selected>Choose...</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>                
</select>
</div>  
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div> </div></div> `);
manageDisabled()
});
$(".form_field_outer").on("change", "select.maintCostField", function() {
manageDisabled()
})
function manageDisabled() {
let disabled = [];
$('select.maintCostField option:selected').each(function() {
if ($(this).attr('value')) disabled.push($(this).attr('value'))
})
$('select.maintCostField option').not(':selected').each(function() {
$(this).attr('disabled', disabled.includes($(this).attr('value')));
})
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer  ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[${index}][id_casting]" id="id_casting">
<option selected>Choose...</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
<button type="button" class="btn btn-primary btn-lg top-right-button mr-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</div>
<div class="casting_details">
<div class="casting_details2">
<div class="d-flex flex-row mb-6">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>