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)

D. Werle · Accepted Answer · 2017-02-23 08:44:42Z

10

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

answered Feb 23, 2017 at 8:44

D. Werle

1865 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexander Chandra Over a year ago

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

Hicham O'Sfh Over a year ago

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

Katie Isakadze · Accepted Answer · 2017-02-23 09:04:23Z

2

use jQuery

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

or the pure javascript one:

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

JSFiddle

edited Feb 23, 2017 at 9:04

answered Feb 23, 2017 at 8:56

Katie Isakadze

3492 silver badges6 bronze badges

2 Comments

Alexander Chandra Over a year ago

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

Katie Isakadze Over a year ago

oh, in that case try to add this code:

selectobject=document.getElementById("dropdownBranch").getElementsByTagName("option");  selectobject[3].setAttribute("disabled");

before you call $('#dropdownBranch').selectpicker();

threxx · Accepted Answer · 2019-07-25 11:33:15Z

2

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

answered Jul 25, 2019 at 11:33

threxx

1,2353 gold badges32 silver badges61 bronze badges

Comments

Hicham O'Sfh · Accepted Answer · 2021-01-28 23:11:41Z

1

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');

answered Jan 28, 2021 at 23:11

Hicham O'Sfh

84912 silver badges14 bronze badges

1 Comment

raza9798 Over a year ago

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

Jhay · Accepted Answer · 2017-02-23 02:28:11Z

0

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

}

answered Feb 23, 2017 at 2:28

Jhay

766 bronze badges

1 Comment

Alexander Chandra Over a year ago

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

Millar248 · Accepted Answer · 2018-02-22 21:19:17Z

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.

raza9798 · Accepted Answer · 2024-04-17 14:40:12Z

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.

Collectives™ on Stack Overflow

disable bootstrap select option using javascript

7 Answers 7

2 Comments

2 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related