时间戳

首页 > 解决方案 > 使用 jquery 禁用上一个选定项以防止重复行

jquery - 使用 jquery 禁用上一个选定项以防止重复行

问题描述

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

我有以下脚本和视图，它动态添加多行。

$("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>

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

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

如果你有任何想法，我怎样才能实现我会变得 grathfull。

标签： jqueryajaxlaravel

解决方案

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

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

$("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>

推荐阅读