如何在 Laravel5 中禁用选择？答案

【问题标题】：How to make a select disabled in Laravel5?如何在 Laravel5 中禁用选择？
【发布时间】：2020-02-14 07:06:32
【问题描述】：

大家早上好！

我使用 Laravel 5 和 select 类“selectpicker”。

我希望当我单击其中一个选项以禁用或不禁用时，我可以做到这一点。因为我用下面的选项内容创建了一个 div。所以如果select选项不是disable或者none，它会再次创建一个div。

这两天我做不到..

<select id="interlocutorsList" name="interlocutorsList" class="selectpicker" data-width="100%" data-style="btn-info select2" data-live-search="true">
 <option id="titleSelectInterlocutor" class="" value=""  selected>Faites un choix</option>
  @foreach( $othersInterlocutors as $interlocutor)
   <option value="{{$interlocutor->id}}" id="option{{$interlocutor->id}}" class="" style="overflow: hidden; width:100%;" data-tokens="">{{$interlocutor->name.' '.$interlocutor->firstName}}
   </option>
  @endforeach
</select>

$("#interlocutorsList").change(function () {
 $('#titleSelectInterlocutor').addClass("d-none");
 var interlocutorSelect=$("#interlocutorsList").val();
 $('#option'+interlocutorSelect).addClass("d-none");
 var nameSel=interlocutorsTab[interlocutorSelect];
 $(".interlocutorSel").append("<div class='row rowSensor"+interlocutorSelect+"'><div class='col-lg-12 mb-1'><p class='d-inline' style='color: #000;'>"+nameSel+"</p><input id='interlocutor"+interlocutorSelect+"' type='hidden' name='interlocutor"+interlocutorSelect+"' value='on'><button type='button' id='btnSup" + interlocutorSelect + "' class='btn btn-outline-info buttonSubmit float-right'>-</button></div></div> ");

});

$(".interlocutorSel").on("click", "button[id^='btnSup']", function () {
 var idBtnClick = $(this).attr("id");
 var nbCustom = idBtnClick.substring(6);
 $('.rowSensor' + nbCustom).remove();
 $('#option'+nbCustom).removeClass("d-none"); 
});

【问题讨论】：

你想禁用任何一个选项吗？
当我点击该选项时，它会创建一个div，如果我再次打开select，我希望点击的选项不再可用。

标签： javascript jquery css laravel bootstrap-4

【解决方案1】：

您可以在事件发生时在选项中添加 disabled='disabled'。

<option value="opel" disabled='disabled'>Opel</option>

如果您使用的是 jQuery

jQuery('#option'+nbCustom).attr("disabled", 'disabled');

如果您使用的是 jQuery 1.6+：

jQuery('#option'+nbCustom).prop("disabled", true);

示例如下。

<!DOCTYPE html>
<html>
<body>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel" disabled='disabled'>Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>
</html>

【讨论】：