Disable field if another one is filled

Question

I need it: if the Code field is empty the Internal Code field can be enabled / empty too, and if the code field is filled the internal code field has to be disabled (because when entering the code the internal code is filled automatically).

But my code is doing backwards, only enables the internal code field after the code is completed. And another, I need to treat the error if the user enters a value in the Code field and remove the value the internal Code field is disabled again immediately, has this possibility ?

    <script type="text/javascript">
var codigo = document.getElementById("codigo");	
var codigo_interno = document.getElementById("codigo_interno");


codigo.addEventListener('keyup', function() {
    codigo_interno.disabled = codigo.value.trim().length > 0;
});

  //agora uma função para keyup muito semelhante para o codigo_interno
codigo_interno.addEventListener('keyup', function() {
    codigo.disabled = codigo_interno.value.trim().length > 0;
});
</script>

<label>Código</label>
<input type="text" id="codigo">

<label>Código Interno</label>
<input type="text" id="codigo_interno">

Answer 1

In his code was already set to the input internal code be disabled, that way the same would not change the status because you wanted to change to a state that was already set.

document.getElementById("codigo").onblur = function() {libera()};
function libera() {
  var codigo = document.getElementById("codigo");
  var codigo_interno = document.getElementById("codigo_interno");

  if (codigo !== "") {
    codigo_interno.disabled = true;
    codigo_interno.value = "produto...";
  }
}

<label for="codigo">Código
<input type="text" id="codigo">
</label>
<label for="codigo_interno">Código Interno
<input type="text" id="codigo_interno">
</label>

Answer 2

You can simplify the logic you are using for a direct assignment based on comparing the number of characters written in the codigo. Can know the number of characters by accessing length of value country:

codigo_interno.disabled = codigo.value.length > 0;

So you get disabled the true if the size is greater than 0 and the false otherwise. You can even avoid possible inadvertent spaces at the beginning and end by calling using the function trim to cut them:

codigo_interno.disabled = codigo.value.trim().length > 0;

I also advise to use the event onkeyup, to be more interactive and change as the user fills in, and register for that event through Javascript to better organize.

Example:

var codigo = document.getElementById("codigo");
var codigo_interno = document.getElementById("codigo_interno");

codigo.addEventListener('keyup', function() {//registo  é feito com addEventListener
  codigo_interno.disabled = codigo.value.trim().length > 0;
});

<label>Código</label>
<input type="text" id="codigo">

<label>Código Interno</label>
<input type="text" id="codigo_interno">

Note that I have searched the html fields with getElementById out of function because so is only made once.

Edit:

If you specify that the fields are used instead, that is, writing one off and vice versa, just apply an identical function to the field codigo_interno. This function will disable the field codigo if you have written in codigo_interno:

var codigo = document.getElementById("codigo");
var codigo_interno = document.getElementById("codigo_interno");

codigo.addEventListener('keyup', function() {
  codigo_interno.disabled = codigo.value.trim().length > 0;
});

//agora uma função para keyup muito semelhante para o codigo_interno
codigo_interno.addEventListener('keyup', function() {
  codigo.disabled = codigo_interno.value.trim().length > 0;
});

<label>Código</label>
<input type="text" id="codigo">

<label>Código Interno</label>
<input type="text" id="codigo_interno">

Answer 3

only modify:

if(codigo != ""){
    codigo_interno.disabled = false;
}

for

if(codigo != ""){
    codigo_interno.disable = false;
}

the property is wrong, just typing error