What to do if you can't activate the select box created by bootstrap-select

--Environment - CentOS Linux release 7.8.2003 (Core) - openjdk version "11.0.7" 2020-04-14 LTS - JSF 2.3.9 - jquery 3.2.1 - bootstrap 4.3.1 - bootstrap-select 1.13.14

Event: Unable to activate select box created by bootstrap-select

1. Deactivate the select box during initial display
2. When the checkbox is changed, the active / inactive select box is switched by the ʻonchange` event.

Should not be activated ...

XHTML

<!--abridgement-->
<h:form id="formId">
<h:panelGroup>
  <ui:remove>[use]Checkbox</ui:remove>
  <h:selectBooleanCheckbox id="chekBox" value="#{sampleBean.chekBoxValue}" onchange="changeDisabled();" />
  <h:outputLabel value="use" for="chekBox" />
</h:panelGroup>
<h:panelGroup>
  <ui:remove>Select box</ui:remove>
  <h:selectOneMenu id="select" styleClass="selectpicker" value="#{sampleBean.selected}">
    <f:selectItems value="#{sampleBean.selectItems}" />
  </h:selectOneMenu>
</h:panelGroup>
</h:form>
<!--abridgement-->

JavaScript

$(document).ready(function(){
    changeDisabled();
});

/**Switch between active and inactive select boxes. */
function changeDisabled() {
    /** @type {boolean}Check box selection status. */
    var checked = $("#formId\\:chekBox").prop("checked");
    if (checked) {
        //Activate
        $("#formId\\:select").removeAttr('disabled');
        $("#formId\\:select").next().children().removeClass('disabled');
    } else {
        //Inactivate
        $("#formId\\:select").attr('disabled', 'disabled');
        $("#formId\\:select").next().children().addClass('disabled');
    }
}

SampleBean

//abridgement
public class SampleBean implements Serializable {
    /** serialVersionUID. */
    private static final long serialVersionUID = -6782548672735889274L;
    /**Select box choices. */
    @Getter
    private List<SelectItem> selectItems;
    /**Value selected in the select box. */
    @Getter
    @Setter
    private Integer selected;
    @Getter
    @Setter
    private Boolean chekBoxValue = false;

    /**Bean initialization process. */
    @PostConstruct
    public void init() {
        setSelectItems();
    }

    /**Set choices. */
    private void setSelectItems() {
        selectItems = new ArrayList<SelectItem>();
        selectItems.add(new SelectItem(0, "   "));
        selectItems.add(new SelectItem(1, "Dog"));
        selectItems.add(new SelectItem(2, "Cat"));
        selectItems.add(new SelectItem(3, "Monkey"));
        selectItems.add(new SelectItem(4, "Ponsuke"));
    }
}

Cause: Because the timing to execute the process of deactivating at the time of initial display is ready

Looking at the HTML output while debugging JavaScript, it seemed like ʻonloadthat the HTML of bootstrap-select was constructed, so I tried various things. When I tried it, the initial display inactivity processing was the same, but there was a difference in the location where disabled was added betweenready and ʻonload. Also, the place where disabled is attached has changed, probably because the output HTML changes depending on the version.

Inactive treatment

//Add disabled attribute to select tag
$("#formId\\:select").attr('disabled', 'disabled');
//Add disabbled of class attribute to the child tag of the tag next to select
$("#formId\\:select").next().children().addClass('disabled');

Legend) ★: A tag that becomes a "child tag of the tag next to select" in the output HTML

In the case of the process performed when switching between active and inactive with JavaScript this time, it corresponded only to the place where disabled is attached with ʻonload`.

Activation treatment

$("#formId\\:select").removeAttr('disabled');
$("#formId\\:select").next().children().removeClass('disabled');

bootstrap-select 1.13.14

• bootstrap 4.3.1
• bootstrap-select 1.13.14

HTML output when not deactivated

<div class="dropdown bootstrap-select">
  <select id="formId:select" name="formId:select" class="selectpicker" size="1" tabindex="-98">
    <option value="0">   </option>
    <option value="1">Dog</option>
    <option value="2">Cat</option>
    <option value="3">Monkey</option>
    <option value="4">Ponsuke</option>
  </select>
  <button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="combobox" aria-owns="bs-select-1" aria-haspopup="listbox" aria-expanded="false" data-id="formId:select" title="Nothing selected">
    <div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div></div>
  </button>
  <div class="dropdown-menu ">
    <div class="inner show" role="listbox" id="bs-select-1" tabindex="-1">
      <ul class="dropdown-menu inner show" role="presentation"></ul>
    </div>
  </div>
</div>

HTML output when deactivated with ready

<div class="dropdown bootstrap-select disabled">
  <select id="formId:select" name="formId:select" class="selectpicker" size="1" disabled="disabled" tabindex="-98">
<!--Omitted because it is the same as when not deactivated-->
  <button type="button" class="btn dropdown-toggle disabled btn-light" data-toggle="dropdown" role="combobox" aria-owns="bs-select-1" aria-haspopup="listbox" aria-expanded="false" data-id="formId:select" tabindex="-1" aria-disabled="true" title="Nothing selected">
<!--Omitted because it is the same as when not deactivated-->

HTML output when deactivated by onload

<!--Omitted because it is the same as when not deactivated-->
  <select id="formId:select" name="formId:select" class="selectpicker" size="1" tabindex="-98" disabled="disabled">
<!--Omitted because it is the same as when not deactivated-->
    <div class="filter-option disabled"><div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div></div>
<!--Omitted because it is the same as when not deactivated-->

bootstrap-select 1.6.3

• bootstrap 3.3.0
• bootstrap-select 1.6.3

HTML output when not deactivated

<select id="formId:select" name="formId:select" class="selectpicker" size="1" style="display: none;">
  <option value="0">   </option>
  <option value="1">Dog</option>
  <option value="2">Cat</option>
  <option value="3">Monkey</option>
  <option value="4">Ponsuke</option>
</select>
<div class="btn-group bootstrap-select">
  <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="formId:select" title="   ">
    <span class="filter-option pull-left">   </span>&nbsp;<span class="caret"></span>
  </button>
  <div class="dropdown-menu open">
    <ul class="dropdown-menu inner selectpicker" role="menu">
      <li data-original-index="0" class="selected"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>   </span>"><span class="text">   </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      <li data-original-index="1"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Dog</span>"><span class="text">Dog</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      <li data-original-index="2"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Cat</span>"><span class="text">Cat</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      <li data-original-index="3"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Monkey</span>"><span class="text">Monkey</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      <li data-original-index="4"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Ponsuke</span>"><span class="text">Ponsuke</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
    </ul>
  </div>
</div>

HTML output when deactivated with ready

<select id="formId:select" name="formId:select" class="selectpicker" size="1" disabled="disabled" style="display: none;">
<!--Omitted because it is the same as when not deactivated-->
  <button type="button" class="btn dropdown-toggle selectpicker disabled btn-default" data-toggle="dropdown" data-id="formId:select" tabindex="-1" title="   ">
<!--Omitted because it is the same as when not deactivated-->
      <li data-original-index="0" class="disabled selected"><a tabindex="-1" class="" data-normalized-text="<span class=&quot;text&quot;>   </span>" href="#"><span class="text">   </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      <li data-original-index="1" class="disabled"><a tabindex="-1" class="" data-normalized-text="<span class=&quot;text&quot;>Dog</span>" href="#"><span class="text">Dog</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      <li data-original-index="2" class="disabled"><a tabindex="-1" class="" data-normalized-text="<span class=&quot;text&quot;>Cat</span>" href="#"><span class="text">Cat</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      <li data-original-index="3" class="disabled"><a tabindex="-1" class="" data-normalized-text="<span class=&quot;text&quot;>Monkey</span>" href="#"><span class="text">Monkey</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      <li data-original-index="4" class="disabled"><a tabindex="-1" class="" data-normalized-text="<span class=&quot;text&quot;>Ponsuke</span>" href="#"><span class="text">Ponsuke</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<!--Omitted because it is the same as when not deactivated-->

HTML output when deactivated by onload

<select id="formId:select" name="formId:select" class="selectpicker" size="1" disabled="disabled" style="display: none;">
<!--Omitted because it is the same as when not deactivated-->
  <button type="button" class="btn dropdown-toggle selectpicker btn-default disabled" data-toggle="dropdown" data-id="formId:select" title="   ">
<!--Omitted because it is the same as when not deactivated-->
  <div class="dropdown-menu open disabled">
<!--Omitted because it is the same as when not deactivated-->

Countermeasure: Use ʻonload` to deactivate at initial display.

$(window).on('load', function(){
    changeDisabled();
});
//abridgement