Disable input text when clicking on another input text

Question

Disable input text when clicking on another input text

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

4

Good afternoon,

I have the two 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 Input Output would be disabled and vice versa. I'm doing the following:

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

Anyone with a better suggestion?

javascript jquery

asked by anonymous 02.12.2015 / 19:24

3 answers

0

To do exactly what you requested, simply add the disabled attribute to txt as you click the other one. But this is kind of strange, because the moment I select a txt I can not select the other one. See 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><inputtype="text" id="txtEntrada" name="entrada">
<input type="text" id="txtSaida" name="saida">

02.12.2015 / 19:55

0

I'll leave this code here, should anyone want 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 one has some value and not simply when I select it, because so, if I miss the fill, I'll be able to delete the data from one input and move on to the other without problems.

02.12.2015 / 21:14

Laravel + Android How to give a FadeIn only in the Clicked Item

score 2 · Accepted Answer

From what I understand, you need that when you click on an input the other will disable it right? So I made a script using just 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">