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

Ereignis: Das durch Bootstrap-Auswahl erstellte Auswahlfeld kann nicht aktiviert werden

Deaktivieren Sie das Auswahlfeld während der Erstanzeige
Wenn das Kontrollkästchen geändert wird, wird die Aktivierung / Deaktivierung des Auswahlfelds durch das Ereignis "onchange" umgeschaltet.

Sollte nicht aktiviert werden ...

`XHTML`


<!--Kürzung-->
<h:form id="formId">
<h:panelGroup>
  <ui:remove>[verwenden]Kontrollkästchen</ui:remove>
  <h:selectBooleanCheckbox id="chekBox" value="#{sampleBean.chekBoxValue}" onchange="changeDisabled();" />
  <h:outputLabel value="verwenden" for="chekBox" />
</h:panelGroup>
<h:panelGroup>
  <ui:remove>Auswahlfeld</ui:remove>
  <h:selectOneMenu id="select" styleClass="selectpicker" value="#{sampleBean.selected}">
    <f:selectItems value="#{sampleBean.selectItems}" />
  </h:selectOneMenu>
</h:panelGroup>
</h:form>
<!--Kürzung-->

`JavaScript`


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

/**Wechseln Sie zwischen aktiven und inaktiven Auswahlfeldern. */
function changeDisabled() {
    /** @type {boolean}Kontrollkästchen Auswahlstatus. */
    var checked = $("#formId\\:chekBox").prop("checked");
    if (checked) {
        //aktivieren Sie
        $("#formId\\:select").removeAttr('disabled');
        $("#formId\\:select").next().children().removeClass('disabled');
    } else {
        //Inaktivieren
        $("#formId\\:select").attr('disabled', 'disabled');
        $("#formId\\:select").next().children().addClass('disabled');
    }
}

`SampleBean`


//Kürzung
public class SampleBean implements Serializable {
    /** serialVersionUID. */
    private static final long serialVersionUID = -6782548672735889274L;
    /**Wählen Sie die Kästchen aus. */
    @Getter
    private List<SelectItem> selectItems;
    /**Im Auswahlfeld ausgewählter Wert. */
    @Getter
    @Setter
    private Integer selected;
    @Getter
    @Setter
    private Boolean chekBoxValue = false;

    /**Bean-Initialisierungsprozess. */
    @PostConstruct
    public void init() {
        setSelectItems();
    }

    /**Auswahl treffen. */
    private void setSelectItems() {
        selectItems = new ArrayList<SelectItem>();
        selectItems.add(new SelectItem(0, "   "));
        selectItems.add(new SelectItem(1, "Inu"));
        selectItems.add(new SelectItem(2, "Katze"));
        selectItems.add(new SelectItem(3, "Saru"));
        selectItems.add(new SelectItem(4, "Ponsuke"));
    }
}

Ursache: Da der Zeitpunkt für die Ausführung des Deaktivierungsvorgangs zum Zeitpunkt der Erstanzeige "bereit" ist

Wenn ich mir die HTML-Ausgabe beim Debuggen des JavaScript anschaue, wurde das Bootstrap-Select-HTML wie "Onload" erstellt, also habe ich verschiedene Dinge ausprobiert. Als ich es versuchte, war die anfängliche Inaktivitätsverarbeitung der Anzeige dieselbe, aber es gab einen Unterschied in der Position, an der deaktiviert wurde, zwischen "bereit" und "Onload". Außerdem hat sich der Ort, an dem deaktiviert angehängt ist, geändert, wahrscheinlich weil sich der Ausgabe-HTML-Code je nach Version ändert.

`Inaktive Behandlung`


//Fügen Sie das Attribut disabled zum Auswahl-Tag hinzu
$("#formId\\:select").attr('disabled', 'disabled');
//Fügen Sie dem untergeordneten Tag des zu auswählenden Tags ein deaktiviertes Klassenattribut hinzu
$("#formId\\:select").next().children().addClass('disabled');

Legende) ★: Ein Tag, das im Ausgabe-HTML zu einem "untergeordneten Tag des nebenzuwählenden Tags" wird

bootstrap-select	1.13.14	1.13.14	1.6.3	1.6.3
Timing zum Deaktivieren	ready	onload	ready	onload
Mit deaktiviertem Attribut	select	select	select	select
Disabbled wird dem Klassenattribut hinzugefügt	Top div, button	Div direkt unter der Schaltfläche ★	button★, li	button★, Div neben Knopf
aria-Mit deaktiviertem Attribut	button	Keiner	Keiner	Keiner

Im Fall des Prozesses, der beim Umschalten zwischen aktiv und inaktiv mit JavaScript ausgeführt wurde, entsprach er nur dem Ort, an dem deaktiviert mit "onload" verbunden ist.

`Aktivierungsbehandlung`


$("#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-Ausgabe, wenn nicht deaktiviert

<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">Inu</option>
    <option value="2">Katze</option>
    <option value="3">Saru</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-Ausgabe bei Deaktivierung mit Bereit

<div class="dropdown bootstrap-select disabled">
  <select id="formId:select" name="formId:select" class="selectpicker" size="1" disabled="disabled" tabindex="-98">
<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->
  <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">
<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->

HTML-Ausgabe bei Deaktivierung durch Onload

<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->
  <select id="formId:select" name="formId:select" class="selectpicker" size="1" tabindex="-98" disabled="disabled">
<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->
    <div class="filter-option disabled"><div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div></div>
<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->

bootstrap-select 1.6.3

bootstrap 3.3.0
bootstrap-select 1.6.3

HTML-Ausgabe, wenn nicht deaktiviert

<select id="formId:select" name="formId:select" class="selectpicker" size="1" style="display: none;">
  <option value="0">   </option>
  <option value="1">Inu</option>
  <option value="2">Katze</option>
  <option value="3">Saru</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;>Inu</span>"><span class="text">Inu</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;>Katze</span>"><span class="text">Katze</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;>Saru</span>"><span class="text">Saru</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-Ausgabe bei Deaktivierung mit Bereit

<select id="formId:select" name="formId:select" class="selectpicker" size="1" disabled="disabled" style="display: none;">
<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->
  <button type="button" class="btn dropdown-toggle selectpicker disabled btn-default" data-toggle="dropdown" data-id="formId:select" tabindex="-1" title="   ">
<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->
      <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;>Inu</span>" href="#"><span class="text">Inu</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;>Katze</span>" href="#"><span class="text">Katze</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;>Saru</span>" href="#"><span class="text">Saru</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>
<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->

HTML-Ausgabe bei Deaktivierung durch Onload

<select id="formId:select" name="formId:select" class="selectpicker" size="1" disabled="disabled" style="display: none;">
<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->
  <button type="button" class="btn dropdown-toggle selectpicker btn-default disabled" data-toggle="dropdown" data-id="formId:select" title="   ">
<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->
  <div class="dropdown-menu open disabled">
<!--Weggelassen, da es das gleiche ist wie wenn es nicht deaktiviert ist-->

Gegenmaßnahme: Verwenden Sie "Onload", um zum Zeitpunkt der Erstanzeige zu deaktivieren.

$(window).on('load', function(){
    changeDisabled();
});
//Kürzung

[JAVA] Was tun, wenn Sie das mit bootstrap-select erstellte Auswahlfeld nicht aktivieren können?

Ereignis: Das durch Bootstrap-Auswahl erstellte Auswahlfeld kann nicht aktiviert werden

XHTML

JavaScript

SampleBean

Ursache: Da der Zeitpunkt für die Ausführung des Deaktivierungsvorgangs zum Zeitpunkt der Erstanzeige "bereit" ist

Inaktive Behandlung

Aktivierungsbehandlung

HTML-Ausgabe, wenn nicht deaktiviert

HTML-Ausgabe bei Deaktivierung mit Bereit

HTML-Ausgabe bei Deaktivierung durch Onload

HTML-Ausgabe, wenn nicht deaktiviert

HTML-Ausgabe bei Deaktivierung mit Bereit

HTML-Ausgabe bei Deaktivierung durch Onload

Gegenmaßnahme: Verwenden Sie "Onload", um zum Zeitpunkt der Erstanzeige zu deaktivieren.

`XHTML`

`JavaScript`

`SampleBean`

`Inaktive Behandlung`

`Aktivierungsbehandlung`