Olá designers, procurei pela web web formas de habilitar varios inputsText de uma vez dependendo do estado de um <p:selectBooleanCheckbox>
. Procurando na internet vi que as opções são ajax, javascript ou tratando uma variavel dentro do bean, no entanto testei todas as alternativas mas ainda não consegui o resultado que espero. Até achei este tópíco no GUJ: link mas não resolveu comigo.
Então venho pedir a ajuda de vocês, é o seguinte tenho um <p:selectBooleanCheckbox>
onde no meu bean eu verifico seu estado e se estiver checado eu adiciono um objeto a uma lista… enfim, quero aproveitar este <p:selectBooleanCheckbox>
para habilitar 4 <p:inputText>
e 1 <p:selectManyCheckbox>
que são campos relacionados ao objeto que salvo na lista, logo se não existir esse objeto (não está checado) não tenho a necessidade de passar pelos campos associados a ele, aumentando assim a usabilidade do sistema.
Tem como fazer isso ? habilitar mais de um componente do primefaces através de um único <p:selectBooleanCheckbox>
?
abaixo segue o código do formulário:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui" template="../main.xhtml">
<ui:define name="content">
<script type="text/javascript">
document.getElementById('boolCheckLeprose').onchange = function () {
document.getElementById('qtdElevadoNovaLeprose').disabled = !this.checked;
}; <!--Tentativa furada de um script JS-->
</script>
<div style="width: fit-content;">
<h:form id="fmLancaInspec">
<p:focus />
<div style="margin: 0 auto; width: fit-content;">
<h2>Lançamento de Inspeção</h2>
</div>
<!--Lançamento de Inspeção -->
<p:panelGrid>
<p:row>
<p:column colspan="8">
<!--este é o campo boolean que será checado ou não-->
<p:selectBooleanCheckbox id="boolCheckLeprose" required="#{param['fmLancaInspec:btnConfirm']==false}"
value="#{lancamentoPlanilhaInspecao.leprose}">
</p:selectBooleanCheckbox>
<p:spacer width="6"/>
<p:outputLabel value="Leprose" for="boolCheckLeprose" />
<br/><!--Entre as tags <br> s encontram os 4 <inputText> que quero
habilitar quando o checkbox for true,
por padrão devem estar desativados-->
<p:spacer width="6"/>
<p:outputLabel value="Plantas Novas >>" />
<p:spacer width="10"/>
<p:outputLabel id="qtdElevadoNovaLeprose" value="Qtde. + elevado: " for="qtdMaisElevadoNovaLeprose"/>
<p:inputText id="qtdMaisElevadoNovaLeprose" value="#{lancamentoPlanilhaInspecao.leprose_qntdeElevado_nova}"
style="width: 60px;" /><!-- Input 1 -->
<p:spacer width="5"/>
<p:outputLabel id="qtdTotalNovaL" value="Qtde. Total: " for="qtdTotalNovasLeprose"/>
<p:inputText id="qtdTotalNovasLeprose" value="#{lancamentoPlanilhaInspecao.leprose_qntdeTotal_nova}"
style="width: 60px;" /><!-- Input 2 -->
<br/>
<p:spacer width="6"/>
<p:outputLabel value="Plantas Velhas >>" />
<p:spacer width="8"/>
<p:outputLabel id="qtdElevadoVelhas" value="Qtde. + elevado: " for="qtdMaisElevadoVelhasLeprose"/>
<p:inputText id="qtdMaisElevadoVelhasLeprose" value="#{lancamentoPlanilhaInspecao.leprose_qntdeElevado_velha}"
style="width: 60px;" disabled="true"/><!-- Input 3 -->
<p:spacer width="5"/>
<p:outputLabel id="qtdTotalVelhaL" value="Qtde. Total: " for="qtdTotalVelhasLeprose"/>
<p:inputText id="qtdTotalVelhasLeprose" value="#{lancamentoPlanilhaInspecao.leprose_qntdeTotal_velha}"
style="width: 60px;" disabled="true"/><!-- Input 4 -->
<br/>
<!-- Aqui é o <p:selectManyChexkbox que também quero habilitar ao clicar no
checkbox do começo -->
<p:outputLabel value="Estágios encontrados:"/>
<p:selectManyCheckbox id="estagiosLeprose" value="#{lancamentoPlanilhaInspecao.estagiosEncontrados}" disabled="true"
converter="estagioPragaConverter" layout="grid" columns="4">
<f:attribute name="collectionType" value="java.util.ArrayList"/>
<f:selectItems value="#{lancamentoPlanilhaInspecao.estagiosExistentes}" var="#{ep}" itemLabel="#{ep}" itemValue="#{ep}"/>
<p:spacer width="5"/>
</p:selectManyCheckbox>
</p:column>
</p:row>
</p:panelGrid>
<div style="margin: 0 auto; width: fit-content;">
<p:commandButton id="btnConfirm" class="btn btn-success btn-md" value="Cadastrar" icon="fa fa-check" action="#{lancamentoPlanilhaInspecao.lancar()}" ajax="false"/>
<p:commandButton id="btnCancel" class="btn btn-danger btn-md" value="Cancelar" icon="fa fa-ban" action="#{lancamentoPlanilhaInspecao.cancelar()}" />
</div>
</h:form>
</div>
</ui:define>
</ui:composition>
Espero que possam me ajudar! Estou usando Primefaces 5.2
Desde já, agradeço.