Disable input text by clicking another input text

Asked

Viewed 504 times

4

Good Afternoon,

I have both inputs below:

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

I would like that when clicking the input the Output was disabled and vice versa. I’m doing it this way:

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

Some with a better suggestion?

javascript jquery

  • Bia, if for example I click initially on txtEntrada then the txtSaidawill be disabled and will not be able to click on it again, is this behavior you expect?

  • 1

    The way you’re putting it looks like they’re exclusionary, is that it? If I fill txtSaida I can’t fill in txtEntrada?

  • @Pedrocamarajunior this is my dilemma, I wish it were possible yes click on txtSaida again.

  • Yes @Eduardoalmeida

3 answers

2


From what I understand, you need that when clicking on one input the other one disables right? Then I made a script using Javascript only.

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">

  • That’s exactly it, thank you.

  • 1

    vanilla js the king of frameworks! uha

  • 1

    Doubt @devgaspa, that snippet: if(['txtEntrada','txtSaida'].indexOf(self.id) !== -1) does what?

  • @Bia this code snippet checks if the attribute value id of self(clicked element) is one of the two values declared in the array ['txtEntrada','txtSaida'], he does this checking using the indexOf, if the value of id does not exist in the array the function will return -1. I used this method to validate the clicked elements why I am assigning the event click to the document, if it were only to the items it would not be necessary to validate it. Read on index here

  • Thank you @devgaspa

0

To do exactly what you asked just add the attribute disabled at the txt the moment you click the other one. However, this is a little strange, because the moment I select a txt I can no longer select the other one. Take the example:

$(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">

  • Your code didn’t work here, I’m using Chrome v46.

  • I’m also on Chrome @devgaspa and it’s working here. What I didn’t do in this code is allow the txt that was disabled to be enabled again as you did in your reply.

  • You are just disabling the fields. When disabling you have to check if the clicked is disabled and enable it.

  • @devgaspa tried to do this, but I don’t know why the event click is not called when I click on the disabled txt. To try to find the reason

  • This question may help you http://stackoverflow.com/questions/3100319/event-on-a-disabled-input

  • Yeah, to do it without POG with only JavaScript pure as you did.

Show 1 more comment

0

I’ll leave this code here in case anyone wants to use it:

$(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);
    }
  });
})

Basically, I disable the inputs when the other has some value and not simply when I select, because then, if I miss the fill, I will be able to delete the data from one input and pass to the other without problems.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.