Enable button only when two selects are different from 0

Question

Good morning.

I am doubtful to do a validation in two selects in jquery.

I need the button to only enable when the two selects are with some selected value.

But the way I did, it validates if the first select is not empty, and the second and if I do otherwise, select the second select first, it does not understand.

I did the function completely wrong. I did the validation with the first select and then with the second, using if. Some can help me?

as is.

        $("#select-1").change(function(){
          if( $('#select-1').val() != 0 ){
            $("#select-2").change(function(){
              if( $('#select-2').val() != 0 ){
              botaoBuy.attr("disabled", false);
              botaoBuy.css("opacity","1");

              }else{
                botaoBuy.attr("disabled", true);
                botaoBuy.css("opacity","0.4");
              }
            });
          }else{
            botaoBuy.attr("disabled", true);
            botaoBuy.css("opacity","0.4");
          }
      });

Answer 1

You can call a function that defines the value of the attribute disabled when there is change in one of the <select>:

$(function(){
  
  var animals = $('#animals')
    , sports = $('#sports')
    , button = $('button')
  
  function handleButtonDisabledState(){
    button.attr('disabled', !animals.val() || !sports.val())
  }
  
  animals.on('change', handleButtonDisabledState)
  sports.on('change', handleButtonDisabledState)
})

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

<select id='animals'>
  <option selected disabled>Animais</option>
  <option value='dog'>Cachorro</option>
  <option value='cat'>Gato</option>
</select>

<select id='sports'>
  <option selected disabled>Esportes</option>
  <option value='basketball'>Basquete</option>
  <option value='soccer'>Futebol</option>
</select>

<button disabled>Enviar</button>

Answer 2

You can try this way below, when there is a change in one of the two, it checks whether the value of both fields has changed or not:

$("#select-1, #select-2").change(function(){
    if( $('#select-1').val() != 0 && $('#select-2').val() != 0 )
    {
        botaoBuy.attr("disabled", false);
        botaoBuy.css("opacity","1");
    } else {
        botaoBuy.attr("disabled", true);
        botaoBuy.css("opacity","0.4");
    }
});

Answer 3

You can do it like this:

function eventoChange() {

  $("#comprar").prop('disabled',
     ($('#select-1').val() == 0 || $('#select-2').val() == 0)
  );

}

$("#select-1, #select-2").change(eventoChange);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-1" selected="0">
  <option value="0">--selecione o produto--</option>
  <option value="1">Paçoquita</option>
  <option value="2">Pé de moleque</option>
</select>

<select id="select-2" value="0">
  <option value="0">--forma de pagamento--</option>
  <option value="1">Dinheiro</option>
  <option value="2">Cartão</option>
</select><br><br>

<button id="comprar" disabled>Comprar</button>