Script to disable and enable compos with "READONLY" from a Checkbox

Asked

Viewed 636 times

0

I need a script that enables and disables a field with READONLY from a checkbox I don’t know how to program in javascript, How do this script 

    <input readonly="" type="text" name="xx" value=""
    <input readonly="" type="text" name="xx" value=""
    <input readonly="" type="text" name="xx" value="" 
    Editar:<input type="checkbox" name="check" value="sim" />
    <input type="submit" value="Salvar Dados" /></p>

So if I check the checkbox releases all fields for editing

javascript

1 answer

1


You can do it like this:

Example:

var editar = document.getElementById("editar");


// No click verifico se o editar esta marcado e desativo os 
// readOnly dos inputs type text
editar.addEventListener("click", function() {
  if (this.checked) {
    toggleReadOnly(false);
  } else {
    toggleReadOnly(true);
  }
});

// Percorro  os elementos inputs type text e habilito/desabilito
function toggleReadOnly(bool) {
  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type === "text") {
      inputs[i].readOnly = bool;
    }
  }
}
input[type=text]:-moz-read-only {
  background-color: #dddddd;
}
input[type=text]:read-only {
  background-color: #dddddd;
}
<input readonly="" type="text" name="xx" value="">
<input readonly="" type="text" name="xx" value="">
<input readonly="" type="text" name="xx" value="">
<label for="editar">Editar:</label>
<input type="checkbox" name="check" value="sim" id="editar" />
<input type="submit" value="Salvar Dados" />

  • Perfect... that’s right... just a detail?? when enabled, the background could be with a different color or to show that the field is enabled for editing. this is complicated?

  • You can create a css class with this background color and add in the enabled input by adding inputs[i].className += " nomeDaMinhaClasse"; However for UX reasons do not advise modifying the background of the field because it is default, you could just override the readonly css to leave it with a disabled appearance.

  • Show only has a problem that <form is in a lightbox if I disable the checkbox it disables the fields that are in the page below the lightbox, I think these fields would have to be idetified by an id

  • The proposed problem to be solved is that of the example in your question above, if you have not detailed it correctly edit to fit your problem. Answering your question, do you have any difficulty in removing the for and putting fixed each id and setting the readonly? is the same logic only fixed

  • I didn’t detail it because I didn’t know that the script going into the lightbox would interfere with the parent page. the logic I understood I don’t know how I change the command to traverse by id

  • @Fabiohenrique can do it this way: https://jsfiddle.net/o76ag8y8/

  • Perfect now thank you

  • @Fabiohenrique do not forget to mark the answer as correct in case she has managed to solve the problem.

Show 3 more comments

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.