Change readonly to various fields

Question

I have several inputs with readonly="true" which, when pressing the edit button, it should change to readonly="false", but I am able to do this only if I create 1 script for each input.

Could I make 1 script to change in all?

I tried to leave everyone with the same ID, but it changes only the first one. The 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>

The script:

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

I searched the internet but only found how to change 1 input, several did not find anything.

Thank you in advance!

Answer 1

Ids have to be unique and you can’t select different elements with the same ID, you have to use class(s).

The idea of ID is exactly that there is only one element per page with that name (myText in your case).

If you want to do this with native Javascript you have to have a cycle for and you can do it like this:

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');
}

Instead of 'input.form-control' which uses the class, you can also select by the kinship relations in the DOM, for example: '.form-group input'

Answer 2

I noticed you’re tagged javascript, but I also noticed that you’re using Bootstrap, with that you must be using jQuery. With that, I’ll leave an example in jqueryfor you.

Using jQuery you just need to reference the object you want to use. In this example I am referencing all the inputs from the page (following your example). But you can select only the ones you want.

$('#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>

In this example, only the input’s that possess the class txtBloqueado will be enabled by jQuery.

Another way would be to put a id in "father div" and enable all inputs from it. In this example I’ll show you how to do it.

Example in Jsfiddle enabling all inputs.

Answer 3

See example

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>