0

estou tentando esconder campos select de acordo com a opção escolhida nos radio button Consigo esconder os inputs, mas os campos select não estou conseguindo, alguém poderia me ajudar?

Formulario:

<div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Forma de pagamento <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-1" value="1" <?php echo ($vtipoCadastro == '1')?'checked':'';?> > Boleto Conta Um
                      <br />
                      <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-2" value="2" <?php echo ($vtipo == '2')?'checked':'';?> > Cartão Conta Um
                      <br />
                      <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-3" value="3" <?php echo ($vtipo == '3')?'checked':'';?> > Espécie <small><b>(R$)</b></small>
                      <br />
                      <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-4" value="4" <?php echo ($vtipo == '4')?'checked':'';?> > Depósito/Transferência
                      <br />
                      <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-5" value="5" <?php echo ($vtipo == '5')?'checked':'';?> > Cheque
                      <br />
                    </div>
                  </div>

                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Qtde. Parcelas <span class="required">*</span></small>
                    </label>
                    <div class="col-md-3 col-sm-3 col-xs-12">
                      <select class="form-control col-md-7 col-xs-12 select2_single forma" tabindex="-1" id="select-custom-field2"  name="custom_field[account][2]">
                        <option></option>
          <?php
                        for($a=1; $a<=12; $a++){
                        ?>
                            <option value="<?php echo $a;?>" <?php if($a == $vqtdeparcelas){ echo ' selected="selected"'; } ?> ><?php echo $a;?></option>
                        <?php } ?>
                      </select>
                    </div>
                  </div>


                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Dia Vencimento <span class="required">*</span></small>
                    </label>
                    <div class="col-md-3 col-sm-3 col-xs-12">
                      <select class="form-control col-md-7 col-xs-12 select2_single forma" tabindex="-1" id="select-custom-field3"  name="custom_field[account][3]">
                        <option></option>
          <?php
                        $b = array(5,15); //  ######## DIAS PARA PAGAMENTO
                        foreach($b as $key => $value){
                        ?>
                            <option value="<?php echo $a;?>" <?php if($a == $vvencimento){ echo ' selected="selected"'; } ?> ><?php echo $value;?></option>
                        <?php } ?>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Data do recebimento<span class="required">*</span>
                    </label>
                    <div class="col-md-3 col-sm-3 col-xs-12">
                      <input type="text" class="form-control col-md-7 col-xs-12 forma" name="custom_field[account][4]" id="input-custom-field4" value="<?php echo $vdatarecebimentoespecie; ?>" data-inputmask="'mask' : '99/99/9999'"><br>
                    </div>
                  </div>

script:

$(document).ready(function() {
      $('input:radio[name="custom_field[account][1]"]').on("change", function() {
          if (this.checked && this.value == '1') {
              $("#select-custom-field2, #select-custom-field3").show();
              $("#input-custom-field4").hide();
          } if (this.checked && this.value == '2') {
              $("#select-custom-field2, #select-custom-field3").show();
              $("#input-custom-field4").hide();
          } if (this.checked && this.value == '3') {
              $("#input-custom-field4").show();
              $("#select-custom-field2, #select-custom-field3").hide();
          } if (this.checked && this.value == '4') {
              $("#input-custom-field4").show();
              $("#select-custom-field2, #select-custom-field3").hide();
          } if (this.checked && this.value == '5') {
            $("#select-custom-field2, #select-custom-field3").show();
              $("#input-custom-field4").hide();
          }
      });
  });

E o CSS:

  input.form-control.forma {
    display: none;
  }

  select.form-control.forma {
    display: none;
  }
3
  • Testei seu script e os selects são exibidos quando eu escolho Boleto Conta Um , Cartão Conta Um e Cheque e são ocultados quando clico em Espécie (R$) ou Depósito/Transferência. Qual é o erro exatamente ? 8/06/2017 às 19:37
  • O erro é que os selects devem sumir quando seleciona ESPECIE ou DEPOSITO/TRANSFERENCIA. Pra mim aqui, os select estao o tempo todo aparecendo, independente da opção selecionada, o unico que esta funcionando aqui é o input (Data do recebimento)
    – Gabriel
    8/06/2017 às 19:49
  • Aqui funcionou ok... Não ocorre algum erro no console do seu browser ? Se ocorrer, posta aqui. 8/06/2017 às 20:50

1 Resposta 1

1

O problema estava no select

<select class="form-control col-md-7 col-xs-12 select2_single forma" tabindex="-1" id="select-custom-field2"  name="custom_field[account][2]">

Por causa do for do PHP, quando eu ia em inspecionar elemento no browser ele mostrava que o select estava em um <span> e não em um <select>. Então resolvi assim:

<select class="form-control col-md-7 col-xs-12 1select2_single forma" tabindex="-1" id="select-custom-field2"  name="custom_field[account][2]">

Colocando o numero 1 antes do select2_single

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .