Como desabilitar botão e habilitar somente após a seleção das combos

Front-end
, ,
#1

Pessoal,

Tenho um botão “Transferir” e gostaria de quando o usuário entrar na tela o mesmo ficar desabilitado e somente após a seleção das combos (combo1 e combo2) o botão é habilitado.

Estou trabalhando com JSF e segue código:

				<div id="dv" class="ui-widget-content  ui-corner-all"
					style="padding: 10px; margin-top: 15px;">

					<h:panelGrid columnClasses="_230px" columns="2" cellspacing="2"
						cellpadding="2" styleClass="table-form" id="panelGridConsulta">

						<h:outputLabel id="filtroMarcaLabel"
							value="#{lbl.transferir_perguntas_frequentes_programa_origem}"
							for="filtroProgramaOrigem">
							<span id="a3st21">*</span>: </h:outputLabel>

						<h:selectOneMenu
							value="#{perguntaFrequenteBean.programaOrigem.id}"
							style="width:300px; height:21px; margin-top:3px; margin-right: 300px;"
							id="filtroProgramaOrigem">
							<f:selectItem id="selecione" itemLabel="Escolha o Programa"
								itemValue="0" />
							<f:selectItems id="itemsMar1ca"
								value="#{perguntaFrequenteBean.programasComPerguntas}"
								var="programa" itemValue="#{programa.id}"
								itemLabel="#{programa.nome}" />
						</h:selectOneMenu>


						<h:outputLabel id="filtroMarcaLabel1"
							value="#{lbl.transferir_perguntas_frequentes_programa_destino}"
							for="filtroProgramaDestino">
							<span id="a3s234t21">*</span>: </h:outputLabel>

						<h:selectOneMenu
							value="#{perguntaFrequenteBean.programaDestino.id}"
							style="width:300px; height:21px; margin-top:3px; margin-right: 300px;"
							id="filtroProgramaDestino">
							<f:selectItem id="seleci3one" itemLabel="Escolha o Programa"
								itemValue="0" />
							<f:selectItems id="item3sMar1ca"
								value="#{perguntaFrequenteBean.programas}" var="programa"
								itemValue="#{programa.id}" itemLabel="#{programa.nome}" />
						</h:selectOneMenu>

					</h:panelGrid>

				</div>

				<br />

				<h:panelGroup id="panelGroupSave" styleClass="pad-right15"
					style="float: right;">

					<h:outputLink value="javascript:void(0)"
						styleClass="btn-laranja padding-left5 margem-left5"
						onclick="doManual()" id="voltarBtn">
						<span id="spanVoltar"><h:outputText
								value="#{lbl.botao_transferir}" /></span>
					</h:outputLink>

					<script type="text/javascript">
						function doManual() {
							$("[id$='textoMensagem11110']").html(
									$("[id$='textoMensagem11110']").html().replace('{0}', $('#filtroProgramaOrigem').find('option:selected').text()).replace('{1}', $('#filtroProgramaDestino').find('option:selected').text()));
							showPopup11110();
							return false;
						}

						function showPopup11110() {
							$(".dialog11110").dialog('open');
						}

						function closePopup11110() {
						//$("[id$='textoMensagem11110']").html('#{msg.MN067}');
						let texto = $("[id$='textoMensagem11110']").text();
						string = texto.replace('- ', '');
						$("[id$='textoMensagem11110']").html(string);								
							$(".dialog11110").dialog('close');
						}

						function executaLoad() {
							$(".pg_load").html("&lt;div class='esmanecer'&gt;&lt;/div&gt;&lt;div class='info'&gt;Aguarde...&lt;/div&gt;");
							$(".pg_load").show();
						}
					</script>

				</h:panelGroup>
#2

Olá!

Basicamente você tem que checar se os atributos do value dos selectOneMenu são diferentes de nulo ou 0 (pois você esta usando um int ou long pro id) e a cada seleção dos combos você disparar um ajax para verificar se os dois combos estão selecionados ou não, e então atualizar o botão para ter um novo valor na propriedade disabled

public boolean habilitar() {
    if(programaOrigem.id != 0 && programaDestino.id != 0) {
        return true;
    }

    return false;
}

Essa tag vai dentro dos seus selectOneMenu. Ela basicamente diz que você quer executar um ajax quando o item do combo for selecionado, que você vai alterar apenas o valor do value desse componente (selectOneMenu) e que você vai atualizar as propriedades do componente que tem o id idBotao

<f:ajax event="itemSelect" execute="@this" update="idBotao"/>
<h:commandButton id="meuBotao" value="Meu botão" disabled="#{meuBean.habilitar()}"></h:commandButton>
#3

Oi Mike,

Então, tentei implementar a solução, mas sem sucesso. Hoje está funcionando acionando a caixa de diálogo primeiro antes de fazer a crítica se tem opção da combo selecionada. O que estou precisando é validar as opções das combos primeiro e se todas forem válidas(preenchidas) acionar a model de confirmação para depois de confirmada fazer a ação.