6

Após efetuar uma busca no Site, encontrei essa pergunta com solução, mas a solução é em jquery!

Ao escolher opção X preciso que um campo em especifico fique desabilitado e só volte a ser habilitado caso outra opção seja acionada!

Preciso dessa solução em JavaScript (todo projeto é em JavaScript).

<button id='btn_habilitar'>Habilita</button>
<button id='btn_desabilitar'>Desabilita</button>
<br>
<br>
<textarea id='obs' placeholder='Observação!'></textarea>

3 Respostas 3

8

O que é preciso para bloquear/desabilitar uma textarea (ou input) é o atributo/propriedade disabled. Assim colocando-o com setAttribute ou removendo-o com removeAttribute vais obter o resultado que queres. Um exemplo seria:

var textarea = document.getElementById('obs');
window.addEventListener('click', function(e) {
    var id = e.target.id;
    if (id == 'btn_desabilitar') textarea.setAttribute('disabled', true);
    else if (id == 'btn_habilitar') textarea.removeAttribute('disabled');
});

jsFiddle: https://jsfiddle.net/eo3nLfpp/

ou simplesmente via propiedade do elemento DOM

var textarea = document.getElementById('obs');
window.addEventListener('click', function(e) {
    var id = e.target.id;
    textarea.disabled = id == 'btn_desabilitar';
});

jsFiddle: https://jsfiddle.net/eo3nLfpp/1/

2
  • Você não acha ruim disparar o evento em toda tela ? Commented 5/02/2016 às 16:22
  • @GabrielRodrigues neste caso é um exemplo. Mas de modo mais geral depende do caso e depende do tipo de evento. Todos os eventos tem capture e bubbling. Quando se usa delegação é isso que se faz.
    – Sergio
    Commented 5/02/2016 às 17:02
6

Basta usar o atributo document.getElementById("id").disabled:

function toggle(enable) {
  document.getElementById("obs").disabled = enable;
}
<button id='btn_habilitar' onclick="toggle(false)">Habilita</button>
<button id='btn_desabilitar' onclick="toggle(true)">Desabilita</button>
<br>
<br>
<textarea id='obs' placeholder='Observação!'></textarea>

3

Você pode fazer assim:

Exemplo:

var btn_habilitar = document.getElementById('btn_habilitar');
var btn_desabilitar = document.getElementById('btn_desabilitar');
var obs = document.getElementById('obs');


btn_habilitar.addEventListener("click", function() {
  obs.disabled = false;
});

btn_desabilitar.addEventListener("click", function() {
  obs.disabled = true;
});
<button id='btn_habilitar'>Habilita</button>
<button id='btn_desabilitar'>Desabilita</button>
<br>
<br>
<textarea id='obs' placeholder='Observação!'></textarea>

Detalhe:

Disabled não passa o valor para o formulário, além de não poder editar.

Readonly envia o valor para o formulário e também não pode editar.

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 .