4

Boa Tarde,

Tenho os dois inputs abaixo:

<input type="text" id="txtEntrada" name="entrada" onkeyup="somenteNumeros(this);" >     
<input type="text" id="txtSaida" name="saida" onkeyup="somenteNumeros(this);">

Gostaria que ao clicar no input Entrada o Saída fosse desabilitado e vice-versa. Estou fazendo da seguinte forma:

<script>
$(document).ready(function(){   
  $("#txtEntrada").blur(function(){  
    if ($("#txtEntrada").val() !=''){
      $('#txtSaida').attr("disabled", true);
    }else{
      $('#txtSaida').attr("disabled", false);
    }
  });   
});
</script>

Algum com uma sugestão melhor?

4
  • Bia, se por exemplo eu clicar inicialmente no txtEntrada então o txtSaidaficará desabilitado e não será possível clicar nele novamente, é esse comportamento que você espera? 2/12/2015 às 18:35
  • 1
    Do jeito que você tá colocando parece que eles são excludentes, é isso? Se eu preencher txtSaida eu não posso preencher txtEntrada? 2/12/2015 às 18:48
  • @PedroCamaraJunior esse é meu dilema, gostaria que fosse possível sim clicar no txtSaida novamente.
    – Bia
    2/12/2015 às 19:04
  • Sim @EduardoAlmeida
    – Bia
    2/12/2015 às 19:06

3 Respostas 3

2

Pelo que entendi, você precisa que quando clicar em um input o outro desabilite certo? Então fiz um script usando apenas JavaScript.

document.addEventListener('click', function(e) {
  
  var self = e.target;
  
  if(['entrada','saida'].indexOf(self.id) !== -1) {
    var el = document.getElementById(self.id === 'entrada' ? 'saida' : 'entrada');
    
    self.removeAttribute('disabled');
    
    el.setAttribute('disabled','');
    el.value = "";
  }
})
<input type="text" id="entrada" name="entrada">     
<input type="text" id="saida" name="saida">

5
  • É exatamente isso, obrigada.
    – Bia
    2/12/2015 às 19:07
  • 1
    vanilla js o rei dos frameworks! uha 2/12/2015 às 19:18
  • 1
    Dúvida @devgaspa, esse trecho: if(['txtEntrada','txtSaida'].indexOf(self.id) !== -1) faz oque?
    – Bia
    2/12/2015 às 19:27
  • @Bia este trecho do código verifica se o valor do atributo id de self(elemento clicado) é um dos dois valores declarados no array ['txtEntrada','txtSaida'], ele faz essa verificação usando o indexOf, se o valor de id não existir no array a função retornará -1. Usei este método para validar os elementos clicados por que estou atribuindo o evento click ao documento, se fosse somente aos itens não seria necessário está validação. Leia sobre indexOf aqui 2/12/2015 às 19:32
  • Muito obrigada @devgaspa
    – Bia
    2/12/2015 às 19:34
0

Para fazer exatamente o que você pediu basta adicionar o atributo disabled ao txt no momento em que clica no outro. Porém isso fica meio estranho, pois no momento que selecionar um txt não poderei mais selecionar o outro. Veja o exemplo:

$(document).ready(function() {
  var $txtEntrada = $("#txtEntrada");
  var $txtSaida = $("#txtSaida");

  $txtEntrada.on('click', function() {
    $txtSaida.attr('disabled', 'disabled');
  });

  $txtSaida.on('click', function() {
    $txtEntrada.attr('disabled', 'disabled');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtEntrada" name="entrada">
<input type="text" id="txtSaida" name="saida">

6
  • Seu código não funcionou aqui, estou usando o Chrome v46. 2/12/2015 às 19:05
  • Também estou no Chrome @devgaspa e está funcionando aqui. O que não fiz nesse código é permitir que o txt que foi desabilitado seja habilitado novamente como você fez na tua resposta. 2/12/2015 às 19:13
  • Você está apenas desabilitando os campos. Quando for desabilitar tem que verificar se o clicado está desabilitado e habilita-lo. 2/12/2015 às 19:21
  • @devgaspa tentei fazer isso, porém não sei porque o evento click não é chamado quando clico no txt desabilitado. To tentando achar o motivo 2/12/2015 às 19:23
  • Essa pergunta pode te ajudar stackoverflow.com/questions/3100319/event-on-a-disabled-input 2/12/2015 às 19:39
0

Eu vou deixar esse código aqui, caso alguém queira utilizar:

$(function(){
  $('#txtEntrada, #txtSaida').keyup(function(){
    if($('#txtEntrada').val().length > 0){
      $('#txtSaida').attr('disabled', true);
    }
    else if($('#txtSaida').val().length > 0){
      $('#txtEntrada').attr('disabled', true);
    }
    else{
      $('#txtEntrada, #txtSaida').attr('disabled', false);
    }
  });
})

Basicamente, eu desabilito os inputs quando o outro tem algum valor e não simplesmente quando eu seleciono, porque assim, se eu errar o preenchimento, conseguirei deletar os dados de um input e passar para o outro sem problemas.

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 .