CODEWITHSUNDEEP
javascriptjquerycsslaravelbootstrap-4
MaxenceO
MaxenceO

Reputation: 21

How to make a select disabled in Laravel5?

Good morning all !

I use Laravel 5 and for select the class "selectpicker".

I wish I could do that when I click on one of the options to make this disable or none. Because I create a div with the content of the option just below. So if the select option is not disable or none, it will create a div again.

Two days that I can not do it ..

<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"); 
});

Upvotes: 2

Views: 231

Answers (1)

George Stavrou
George Stavrou

Reputation: 532

You can add the disabled='disabled' in the option when on event.

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

If you are using jQuery < 1.6 do this:

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

If you are using jQuery 1.6+:

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

Example bellow. 

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

Upvotes: 3

Related Questions