1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

jQuery - Como Desabilitar/Habilitar campos de um formulário e remover valores

Olá Pessoal,

Estou tentando fazer uma lógica com jQuery mas não está funcionando...

O que eu pretendo fazer:

  1. Em um formulário, uma combo chamada "baixa" é definida com seu valor padrão "NÃO";
  2. Com isso, 3 inputs ("motivo da baixa", "data da baixa" e "obs da baixa") são renderizados como desabilitados, já que a combo baixa começa com "NÃO";
  3. Se o usuário alterar o valor da combo "baixa" para sim, então os 3 inputs mencionados no item 2 são habilitados para digitação;
  4. Se o usuário alterar o valor da combo "baixa para "NÃO", então os 3 inputs do item 2 são novamente desabilitados e seus valores que o usuário digitou são removidos.

Coloquei um alert e ele me mostra o valor inicial da combo "baixa" como "NÃO". Quando o usuário altera o valor da combo baixa para "SIM", me é mostrado um erro.

Segue o código que fiz até o momento: Agradeço antecipadamente, a ajuda dos colegas.

<div class="row">
     <div class="form-group col-md-4">
        <label for="baixa">Baixa *</label>
        <select id="baixa" name="baixa" class="form-control" onchange="controlaCampos()">
            <option value="SIM">SIM</option>
            <option value="NAO" selected>NÃO</option>
        </select>
     </div>

     <div class="form-group col-md-4">
         <label for="motivo_baixa">Motivo da Baixa</label>
         <select id="motivo_baixa" name="motivo_baixa" class="form-control desabilitar">
             <option value="OPÇÃO1">OPÇÃO1</option>
             <option value="OPÇÃO2">OPÇÃO2</option>
             <option value="OPÇÃO3">OPÇÃO3</option>
             <option value="OPÇÃO4">OPÇÃO4</option>
             <option value="OPÇÃO5">OPÇÃO5</option>
         </select>
     </div>

     <div class="form-group col-md-4">
          <label class="control-label" for="data_baixa">Data da Baixa</label>
          <input class="form-control" type="text" name="data_baixa" size="10" maxlength="10"
          placeholder="digite data da baixa" id="data_baixa">
     </div>
</div>

<div class="row">
    <div class="form-group col-md-12">
        <label for="obs_baixa">Obs da baixa</label>
        <input class="form-control" type="text" name="obs_baixa" size="70" maxlength="70" 
         placeholder="Informe qualquer obs relevante referente a baixa do equipamento" id="obs_baixa">
    </div>
</div>

Abaixo, a tela com o alert, no momento que ela é carregada:

https://www.filepicker.io/api/file/xHnLoTiNTUWN6j81iymr

Abaixo, a tela, após o usuário alterar o valor da combo "baixa":

![https://www.filepicker.io/api/file/jhlgnzZETwSciRrNU0Mc][2]

  • Onde está a implementação da função controlaCampos()?

    javaflex   12 de out de 2016
  • Boa noite,

    IvanSilva   12 de out de 2016
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags jquery html5 ou faça a sua própria pergunta.