Change readonly for several fields

Question

Change readonly for several fields

Navigation

#1 by (5 votes)
#2 by (4 votes)
#3 by (1 votes)

2

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

Would you like to make 1 script to change at all?

I tried to leave everyone with the same ID, but it only changes 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 out how to change 1 input, several did not find anything.

Thank you in advance!

javascript html5

asked by anonymous 15.10.2015 / 21:52

3 answers

Add or Remove Class from a DIV when clicking Using the sort () method

score 5 · Answer 1

IDs must be unique and you can not select different elements with the same ID, you must use class (s).

The ID idea 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 for loop and you can do 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' that uses the class, you can also select for parent relations in the DOM, for example: '.form-group input'

score 4 · Answer 2

I noticed that you're tagged javascript , but I also noticed you're using Bootstrap , so you should be using jQuery . With this, I'll leave an example in jquery for you.

Using jQuery you just need to reference the object you want to use. In this example I'm referencing all of the page's inputs (following its example). But you can select just 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 input's that have the class txtBloqueado will be enabled by jQuery.

Another way would be to put a id in the "parent div" and enable all of its inputs. In this example I show you how to do this.

Example in JSFiddle enabling all inputs.

score 1 · 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>