html - disable bootstrap select option using javascript - Stack Overflow

admin管理员组

文章数量:1201156

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)

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)

• javascript
• html
• css
• twitter-bootstrap
• drop-down-menu

Share Improve this question Follow edited Feb 23, 2017 at 8:33 Alexander Chandra asked Feb 23, 2017 at 1:55 Alexander ChandraAlexander Chandra 65944 gold badges1212 silver badges2424 bronze badges

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 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');
}

use jQuery

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

or the pure javascript one:

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

JSFiddle

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

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

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

}

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.

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.

本文标签： htmldisable bootstrap select option using javascriptStack Overflow