JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <a herf="#" class="alternar" data-index="1">Mudar Campo 1</a>
    <a herf="#" class="alternar" data-index="2">Mudar Campo 2</a>
</div>
<div class="alternativos">
    <input type "text" name="nome" />
    <select name="nome" disabled="true">
        <option value="">Escolha 1</option>
    </select>
</div>
<div class="alternativos">
    <input type "text" name="nome" />
    <select name="nome" disabled="true">
        <option value="">Escolha 1</option>
    </select>
</div>

CSS

div.alternativos {
    margin: 20px;
    position: relative;
    float: left;
    clear: both;
}
div.alternativos select {
    opacity: 0;
    visibility: hidden;
}
div.alternativos select, div.alternativos input {
    position: absolute;
    left: 0px;
    transition: opacity 2s;
}
.alternar {
    cursor: pointer;
    padding: 10px;
    transition: background-color .8s;
}
.alternar:hover {
    background-color: #ccf;
}

JavaScript

var ancoras = document.querySelectorAll('a.alternar');
for (var i = 0; i < ancoras.length; i++) {
    ancoras[i].addEventListener('click', substituir);
}

function substituir(e) {
    var index = this.dataset.index - 1;
    var grupo = document.querySelectorAll('.alternativos')[index];
    var input = grupo.querySelector('input');
    var select = grupo.querySelector('select');

    mudarEstado(input, !select.disabled);
    mudarEstado(select, select.disabled);
}

function mudarEstado(el, mostrar) {
    el.style.opacity = mostrar ? 1 : 0;

    if (mostrar) el.removeAttribute('disabled');
    else el.setAttribute('disabled', true);

    if (mostrar) el.style.visibility = 'visible';
    else setTimeout(function () {
        el.style.visibility = 'hidden';
    }, 1000);

}