How to disable button and enable only after selecting combos

Question

I have a button (Transfer) and I would like when the user enters the screen it is disabled and only after the selection of combos (Combo1 and Combo2) the button is enabled. I’m working with JSF.

Follow the screen code:

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

Answer 1

You can do as in the example below. Basically you will use the method change() to see if select has been changed. With each change in select the variables return receives the value of true, then just make a if to check if the two selects have already been modified, then enable the button:

$(function() {
  let select1 = $('#filtroProgramaOrigem');     // pega o primeiro select
  let select2 = $('#filtroProgramaDestino');    // pega o segundo select
  let botao = $('#voltarBtn');
  let retorno1 = false;
  let retorno2 = false;

  botao.prop('disabled', true);           // desabilita o botão no carregamento da página

  select1.on('change', function() {
    retorno1 = true;
    if (retorno2 == true) botao.prop('disabled', false);
  });
  select2.on('change', function() {
    retorno2 = true;
    if (retorno1 == true) botao.prop('disabled', false);
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="filtroProgramaOrigem">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select id="filtroProgramaDestino">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<button id="voltarBtn">Transferir</button>