2

Como faço para mostrar o label nome e o input nome somente quando o usuário selecionar o option inativo?

  <div>
  <label>Status</label>
  <select name="status">
  <option value="Ativo">Ativo</option>
  <option value="Inativo">Inativo</option>  
  </select>               
  </div>

  <div>
  <label>Nome</label>
  <input type="text" name="nome">
  </div>  
1
  • O que você já fez até o momento? 23/08/2017 às 17:58

3 Respostas 3

2
<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>

<div>
  <label>Status</label>
  <select id="status" name="status">
  <option value="Ativo">Ativo</option>
  <option value="Inativo">Inativo</option>  
  </select>               
  </div>

  <div id="nome" style="display:none;">
  <label>Nome</label>
  <input type="text" name="nome">
  </div>
</div>  

<script>
 $("#status").change(function() {
    $('#nome').hide();
    if(this.value == "Inativo")
      $('#nome').show();

 });
</script>
3
  • se caso o inativo fosse a primeira opção do option somente clicando em ativo e depois voltando pra inativo que irá aparecer o label? 23/08/2017 às 18:47
  • Se quiser fazer isso, basta remover o display:NONE a div de id="nome" 23/08/2017 às 18:51
  • Cara valeu mesmo, agora ficou top 23/08/2017 às 18:55
2

Segue exemplo de uma das possíveis formas de ocultar/exibir o label e o input de acordo com a opção selecionada pelo usuário:

$('#status').change(function(){
  var valor = $('#status').val();
  if (valor == "Inativo"){
    $('#nome').show();
  }
  else {
    $('#nome').hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>Status</label>
  <select id="status" name="status">
  <option value="Ativo">Ativo</option>
  <option value="Inativo">Inativo</option>  
  </select><br><br>               
</div>
  <div id="nome" style='display:none;'>
  <label>Nome</label>
  <input id="nome" type="text" name="nome" >
  </div>

1

Se você está procurando dar reatividade a sua aplicação, te aconselho aprender sobre Vue.JS, veja um exemplo do que você procura:

Vue.component('my-form', {
  data: function () {
    return {
      form: {
        status: 'inativo',
        nome: 'Vue.js Rules!!'
      }
    }
  }
});

new Vue({
  el: "#app"
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app">
  <my-form inline-template>
    
    <div class="box">
      <div class="field">
        <label class="label">Status</label>
        <select name="status" class="control" v-model="form.status">
          <option value="ativo">Ativo</option>
          <option value="inativo">Inativo</option>  
        </select>               
      </div>

      <div class="field" v-if="form.status == 'ativo'">
        <label class="label">Nome</label>
        <input type="text" name="nome" class="control" v-model="form.nome">
      </div>
    </div>
    
  </my-form>
</div>

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 .