[JAVA] Que faire si vous ne pouvez pas activer la boîte de sélection créée par bootstrap-select
--Environnement - 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
Événement: impossible d'activer la boîte de sélection créée par bootstrap-select
- Désactivez la boîte de sélection lors de l'affichage initial
- Cochez la case pour basculer l'activation / la désactivation de la boîte de sélection avec l'événement ʻonchange`
Ne doit pas être activé ...
XHTML
<!--réduction-->
<h:form id="formId">
<h:panelGroup>
<ui:remove>[utilisation]Case à cocher</ui:remove>
<h:selectBooleanCheckbox id="chekBox" value="#{sampleBean.chekBoxValue}" onchange="changeDisabled();" />
<h:outputLabel value="utilisation" for="chekBox" />
</h:panelGroup>
<h:panelGroup>
<ui:remove>Sélectionnez la case</ui:remove>
<h:selectOneMenu id="select" styleClass="selectpicker" value="#{sampleBean.selected}">
<f:selectItems value="#{sampleBean.selectItems}" />
</h:selectOneMenu>
</h:panelGroup>
</h:form>
<!--réduction-->
JavaScript
$(document).ready(function(){
changeDisabled();
});
/**Basculer entre les cases de sélection actives et inactives. */
function changeDisabled() {
/** @type {boolean}État de la sélection des cases à cocher. */
var checked = $("#formId\\:chekBox").prop("checked");
if (checked) {
//Activer
$("#formId\\:select").removeAttr('disabled');
$("#formId\\:select").next().children().removeClass('disabled');
} else {
//Désactiver
$("#formId\\:select").attr('disabled', 'disabled');
$("#formId\\:select").next().children().addClass('disabled');
}
}
SampleBean
//réduction
public class SampleBean implements Serializable {
/** serialVersionUID. */
private static final long serialVersionUID = -6782548672735889274L;
/**Sélectionnez les choix de boîte. */
@Getter
private List<SelectItem> selectItems;
/**Valeur sélectionnée dans la boîte de sélection. */
@Getter
@Setter
private Integer selected;
@Getter
@Setter
private Boolean chekBoxValue = false;
/**Processus d'initialisation du bean. */
@PostConstruct
public void init() {
setSelectItems();
}
/**Définir des choix. */
private void setSelectItems() {
selectItems = new ArrayList<SelectItem>();
selectItems.add(new SelectItem(0, " "));
selectItems.add(new SelectItem(1, "Inu"));
selectItems.add(new SelectItem(2, "Chat"));
selectItems.add(new SelectItem(3, "Saru"));
selectItems.add(new SelectItem(4, "Ponsuke"));
}
}
Cause: Parce que le moment d'exécution du processus de désactivation au moment de l'affichage initial est `prêt '
En regardant la sortie du HTML pendant le débogage de JavaScript, il semblait que le HTML de bootstrap-select avait été construit, donc j'ai essayé diverses choses. Quand je l'ai essayé, le traitement d'inactivité d'affichage initial était le même, mais il y avait une différence dans l'emplacement où désactivé a été ajouté entre «prêt» et «onload». En outre, l'endroit où le paramètre désactivé est joint a changé, probablement parce que le HTML de sortie change en fonction de la version.
Traitement inactif
//Ajouter l'attribut désactivé à la balise de sélection
$("#formId\\:select").attr('disabled', 'disabled');
//Ajoutez la désactivation de l'attribut de classe à la balise enfant de la balise à côté de sélectionner
$("#formId\\:select").next().children().addClass('disabled');
Légende) ★: Une balise qui devient une "balise enfant de la balise à côté de la sélection" dans le HTML de sortie
| bootstrap-select | 1.13.14 | 1.13.14 | 1.6.3 | 1.6.3 |
|---|---|---|---|---|
| Délai de désactivation | ready | onload | ready | onload |
| Avec attribut désactivé | select | select | select | select |
| Désactivé est ajouté à l'attribut de classe | Top div, button |
Div directement sous le bouton ★ | button★, li |
button★, Div à côté du bouton |
| aria-Avec attribut désactivé | button | Aucun | Aucun | Aucun |
Dans le cas du processus effectué lors du basculement entre actif et inactif avec JavaScript cette fois, il ne correspondait qu'à l'endroit où désactivé est attaché avec ʻonload`.
Traitement d'activation
$("#formId\\:select").removeAttr('disabled');
$("#formId\\:select").next().children().removeClass('disabled');
bootstrap-select 1.13.14
- bootstrap 4.3.1
- bootstrap-select 1.13.14
Sortie HTML lorsqu'elle n'est pas désactivée
<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">Chat</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>
Sortie HTML une fois désactivée avec prêt
<div class="dropdown bootstrap-select disabled">
<select id="formId:select" name="formId:select" class="selectpicker" size="1" disabled="disabled" tabindex="-98">
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
<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">
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
Sortie HTML lorsqu'elle est désactivée par onload
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
<select id="formId:select" name="formId:select" class="selectpicker" size="1" tabindex="-98" disabled="disabled">
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
<div class="filter-option disabled"><div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div></div>
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
bootstrap-select 1.6.3
- bootstrap 3.3.0
- bootstrap-select 1.6.3
Sortie HTML lorsqu'elle n'est pas désactivée
<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">Chat</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> <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="text"> </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="text">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="text">Chat</span>"><span class="text">Chat</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="text">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="text">Ponsuke</span>"><span class="text">Ponsuke</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ul>
</div>
</div>
Sortie HTML une fois désactivée avec prêt
<select id="formId:select" name="formId:select" class="selectpicker" size="1" disabled="disabled" style="display: none;">
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
<button type="button" class="btn dropdown-toggle selectpicker disabled btn-default" data-toggle="dropdown" data-id="formId:select" tabindex="-1" title=" ">
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
<li data-original-index="0" class="disabled selected"><a tabindex="-1" class="" data-normalized-text="<span class="text"> </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="text">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="text">Chat</span>" href="#"><span class="text">Chat</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="text">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="text">Ponsuke</span>" href="#"><span class="text">Ponsuke</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
Sortie HTML lorsqu'elle est désactivée par onload
<select id="formId:select" name="formId:select" class="selectpicker" size="1" disabled="disabled" style="display: none;">
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
<button type="button" class="btn dropdown-toggle selectpicker btn-default disabled" data-toggle="dropdown" data-id="formId:select" title=" ">
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
<div class="dropdown-menu open disabled">
<!--Omis car c'est le même que lorsqu'il n'est pas désactivé-->
Contre-mesure: utilisez ʻonload` pour désactiver à l'affichage initial.
$(window).on('load', function(){
changeDisabled();
});
//réduction