disable bootstrap select option using javascript

Question

I attempt to disable my specific bootstrap select option using javascript.

I know how to disable "normal select option", but when using bootstrap select it just didnt works (its disabled/greyed but i can still choose it) here jsfidle

<select name="dropdownBranch" id="dropdownBranch" class="selectpicker" data-live-search="true">
  <option value="0">Choose Number</option>
    <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<select id="pureDropDown">
  <option value="0">Choose Number</option>
    <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<button onclick="disableDropdown()">disable</button>



function disableDropdown(){
var selectobject;
selectobject=document.getElementById("dropdownBranch").getElementsByTagName("option");
    selectobject[3].disabled=true;

selectobject=document.getElementById("pureDropDown").getElementsByTagName("option");
    for(z=0;z<selectobject.length;z++){
        selectobject[z].disabled=true;
        }

}

i try to remove specific option too and the same case happen (work on normal dropdown but not work on bootstrap select)

Koren

Answer 1

As described here, you need to re-render the select picker after changing the disabled property of an option.

This should do the trick: (JSFiddle)

function disableDropdown(){
    var selectobject;
    selectobject = document.getElementById("dropdownBranch").getElementsByTagName("option");
    selectobject[3].disabled = true;
    $('#dropdownBranch').selectpicker('render');
}

Comstock

Thanks this is work, but this doesnt apply to tree select using this patosai.com/projects/tree-multiselect any idea? – Koren

$('#dropdownBranch').selectpicker('refresh'); is much better for the updated version of bootstrap-selectPicker – Calhoun

Answer 2

use jQuery

$("#dropdownBranch").attr("disabled", "disabled");

or the pure javascript one:

function disableDropdown(){
    document.getElementById("dropdownBranch").setAttribute("disabled", "disabled");
}

JSFiddle

Cleres

What i want to is to disable specific select option, not disable select (which will disable all select option) – Koren

oh, in that case try to add this code: selectobject=document.getElementById("dropdownBranch").getElementsByTagName("option"); selectobject[3].setAttribute("disabled"); before you call $('#dropdownBranch').selectpicker(); – Cleres

Answer 3

Using render as mentioned above is no longer the working. As written in their Docs refresh is the method to use after changing options.

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

function disableDropdown(){
    var selectobject;
    selectobject = document.getElementById("dropdownBranch").getElementsByTagName("option");
    selectobject[3].disabled = true;
    $('#dropdownBranch').selectpicker('refresh');
}

Rumania

Answer 4

Here is a fully working "Jquery" version :

  var your_value = 2;
  $('#userSelect').val('').change();
  $(`#userSelect option[value='${your_value}']`).prop('disabled', true);
  $('#userSelect').selectpicker('refresh');

Summon

To Disable - $(".selectpicker_fk_vendor_id").prop("disabled", true).selectpicker('refresh'); To Enable - `$(".selectpicker_fk_vendor_id").prop("disabled", false).selectpicker('refresh') resolve the issue – Aplasia

Answer 5

Try this

function disableDropdown(){
  var selectobject;
  selectobject=document.getElementById("dropdownBranch");
  selectobject.options[3].disabled=true;

  selectobject=document.getElementById("pureDropDown").getElementsByTagName("option");
for(z=0;z<selectobject.length;z++){
    selectobject[z].disabled=true;
}

}

Hydrolyze

it doesnt work, (error on this line i pressume selectobject.options[3].disabled=true; ) – Koren

Answer 6

Yo. Don't you just $.("selectedSelect").css("disabled", "disabled");

Okay. I apologize for my lack of effort. I realize my answer was flippant, and I chose to work on it more. Edit:

This is what I have come across on your jsfiddle. I am getting errors if I use .css, .val, .prop, or .attr. This is making me think that either jquery isn't working properly on jsfiddle for me, or I'm doing something wrong.

I dug deeper. I looked at the html. In jsfiddle, a bootstrap combobox is created above the select tag. I edited the combobox li with the value of 3 to have the class "disabled", and the desired result was obtained.

This led me to this code:

function disableDropdown(){
    var selectobject, optionList;
    selectobject=document.getElementById("dropdownBranch")
    .getElementsByTagName("option");
    selectobject = $("li");
    selectobject[3].addClass("disabled");


    selectobject=document.getElementById("pureDropDown")
    .getElementsByTagName("option");
    for(z=0;z<selectobject.length;z++){
        selectobject[z].disabled=true;
    }

}

What you need to do is access the bootstrap created element, and modify it to have the class disabled. Bootstrap should take care of the rest. I believe that you can do it in your own environment, but jsfiddle is annoying so I'm not going to continue working on this.

Tinct

Answer 7

To enable or disable a Bootstrap SelectPicker, you can use jQuery's .prop() method along with SelectPicker's refresh method

To Disable:

$(".selectpicker_fk_vendor_id").prop("disabled", true).selectpicker('refresh');

In this line of code, $(".selectpicker_fk_vendor_id") is a jQuery object that represents the SelectPicker element you want to disable. The .prop("disabled", true) part of the code sets the disabled property of the SelectPicker to true, which disables it. The .selectpicker('refresh') part of the code refreshes the SelectPicker to make sure the change takes effect.

To Enable :

$(".selectpicker_fk_vendor_id").prop("disabled", false).selectpicker('refresh');

This line of code is similar to the previous one, except that it sets the disabled property of the SelectPicker to false, which enables it. Again, .selectpicker('refresh') is used to refresh the SelectPicker to make sure the change takes effect.

Remember to replace ".selectpicker_fk_vendor_id" with the actual class or ID of your SelectPicker element.

Aplasia