2

Eu tenho vários inputs com readonly="true" que, ao apertar o botão de editar, ele deve alterar para readonly="false", mas eu estou conseguindo fazer isso somente se eu criar 1 script para cada input.

Teria como eu fazer 1 script para alterar em todos?

Eu tentei deixar todos com a mesma ID, mas ele altera somente o primeiro. As inputs:

<div class="form-group">
    <h2>Accomodation</h2>   
    <div class="form-group">
        <label>Name:</label>
        <input class="form-control" id="myText" value="Test" readonly="true" />
    </div>
    <div class="form-group">
        <label>Email:</label>
        <input class="form-control" id="myText" value="Test" readonly="true"/>
    </div>
    <div class="form-group">
        <label>Email Copy:</label>
        <input class="form-control" id="myText" value="Test" readonly="true"/>
    </div>
</div>

O script:

    <script>
        function myFunction() {
            document.getElementById("myText").readOnly = false;
        }
    </script>

Eu procurei na internet mas só encontrei de como alterar 1 input, vários não encontrei nada.

Agradeço desde já!

3 Respostas 3

5

IDs têm de ser únicos e não consegues selecionar elementos diferentes com o mesmo ID, tens de usar classe(s).

A ideia de ID é exatamente que só há um elemento por página com esse nome (myText no teu caso).

Se queres fazer isso com JavaScript nativo tens de ter um ciclo for e podes fazer assim:

var inputs = document.querySelectorAll('input.form-control');
function myFunction() {
    for (var i = 0; i < inputs.length; i++){
    inputs[i].readOnly = false; // ou inputs[i].removeAttribute('readonly');
}

Em vez de 'input.form-control' que usa a classe, podes também selecionar pelas relações de parentesco no DOM, por exemplo: '.form-group input'

2
  • Obrigado pela resposta! Funcionou perfeitamente, mas faltou um detalhe: também tenho outros inputs que estão readonly="true" que não vão ser alterados quando eu clicar no botão. Esse método altera todos os inputs. Teria alguma solução para isso? 15/10/2015 às 20:18
  • @ValdirAmorim depende da estrutura do HTML. Pelo que colocaste na pergunta não dá para adivinhar. Testa seletores diferentes aqui querySelectorAll('input.form-control'); como sugeri no final da resposta. Podes até usar [readonly="true"] no seletor.
    – Sergio
    15/10/2015 às 20:22
4

Notei que está com a tag , mas também notei que você está utilizando Bootstrap, com isso deve está usando jQuery. Com isso, deixarei um exemplo em para você.

Utilizando jQuery você apenas precisa referenciar o objeto que deseja utilizar. Neste exemplo estou referenciando todos os inputs's da página (seguindo seu exemplo). Mas você pode selecionar apenas os que desejar.

$('#btnHabilitar').click(function(){
	$('.txtBloqueado').prop('readonly', false);
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


<div class="form-group">
    <h2>Accomodation</h2>   
    <div class="form-group">
        <label>Name:</label>
        <input class="form-control txtBloqueado" value="Test" readonly="true" />
    </div>
    <div class="form-group">
        <label>Email:</label>
        <input class="form-control txtBloqueado"  value="Test" readonly="true"/>
    </div>
    <div class="form-group">
        <label>Email Copy:</label>
        <input class="form-control" value="Test" readonly="true"/>
    </div>
</div>
<button id="btnHabilitar" class="btn btn-success">Editar</button>

Neste exemplo, somente os input's que possuírem a classe txtBloqueado serão habilitados pelo jQuery.

Uma outra forma, seria colocar um id na "div pai" e habilitar todos os inputs dela. Neste exemplo eu mostro como fazer isso.

Exemplo no JSFiddle habilitando todos os inputs.

4
  • Obrigado pela resposta! Funcionou perfeitamente, mas faltou um detalhe: também tenho outros inputs que estão readonly="true" que não vão ser alterados quando eu clicar no botão. Esse método altera todos os inputs. Teria alguma solução para isso? 15/10/2015 às 20:18
  • @ValdirAmorim você pode filtrar pelos inputs dentro de alguma div. Pode colocar uma classe nesses inputs e filtrar por ela, dentre outras alternativas. Vou alterar minha resposta.
    – Randrade
    15/10/2015 às 20:20
  • @ValdirAmorim fiz a alteração. No Exemplo, apenas os inputs que tiverem a classe .txtBloqueado serão desbloqueados.
    – Randrade
    15/10/2015 às 20:22
  • 1
    Perfeito! Muito obrigado! 15/10/2015 às 20:26
1

Veja exemplo

var ipExcecao = ["myText3"];

function verificarExcecao(ip){  
  for(i in ipExcecao)
     if(ipExcecao[i] == ip.id) return true;
  
  return false;
}

function habilitar() {
    var ip = document.getElementsByTagName("input");
    for(i in ip)
       ip[i].readOnly = verificarExcecao(ip[i]);
}
<input type="button" value="Habilitar" onclick="habilitar();"/>
<div class="form-group">
    <h2>Accomodation</h2>   
    <div class="form-group">
        <label>Name:</label>
        <input class="form-control" id="myText1" value="Test" readonly="true" />
    </div>
    <div class="form-group">
        <label>Email:</label>
        <input class="form-control" id="myText2" value="Test" readonly="true"/>
    </div>
    <div class="form-group">
        <label>Email Copy:</label>
        <input class="form-control" id="myText3" value="Test" readonly="true"/>
    </div>
</div>

2
  • 1
    Obrigado pela resposta! Funcionou perfeitamente, mas faltou um detalhe: também tenho outros inputs que estão readonly="true" que não vão ser alterados quando eu clicar no botão. Esse método altera todos os inputs. Teria alguma solução para isso? 15/10/2015 às 20:19
  • Da um olhada agora. Só colocar o id dos campos exceção na variável ipExcecao 15/10/2015 às 20:44

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 .