enable and disable fields

Question

enable and disable fields

Navigation

#1 by (4 votes)

3

I am finishing a project and would like to see how to enable and disable a text field depending on the radiobutton that the user selects.

I already found a code in the forum and it is what I want only that my questionnaire is filled with an array that brings me the questions of a database and this causes that when selecting a "no" I enabled all the fields and I just want you to enable the text field of the question where the user said "no".

this is my form

<?php 
            //consulta que captura el texto , id de la tabla respuestas 
            $sql = "SELECT texto,id FROM respuestas WHERE idenc='$id'"; 
            $sql = mysqli_query($conexion,$sql); 
            //ahora recorremos los datos texto, id que estan vinculadas a la cuenta seleccionada 
            while ($row = mysqli_fetch_array($sql)){ 
                $texto = $row["texto"]; 
                $idres = $row["id"];   
            ?><tr> 
              <!--  <td width="50"><input type="radio" name="opcion" value="<?php echo $idres; ?>" required</td> 
                <td width="470"><?php echo $texto; ?></td>--> 
            <?php echo "<fieldset>  
                  <legend>".$texto."</legend>  
                  <label>  
                    <input type='radio' name='radio".$idres."' value='1' onclick='deshabilita()'> Si  
                  </label>  
                  <label>  
                      <input type='radio' name='radio".$idres."' value='0' onclick='habilita()'> No  
                  </label>  
                  <label>  
                      <textarea name='Hallazgo".$idres."' disabled class='inputText'>Se tiene un hallazgo? </textarea> 
                  </label> 
                 <label>  
                      <textarea name='Accion".$idres."' disabled class='inputText'>Cual es la acción correctiva </textarea> 
                  </label>  
            </fieldset>"; ?>     
            </tr> 
            <?php } ?> 
            <tr>

this is the javascript code

<script language="JavaScript">
    function habilita(){
        elementos=document.getElementsByClassName("inputText");
        for(var i = 0; i < elementos.length; i++)
        {
            elementos[i].disabled = false;
        }
    }
 
    function deshabilita(){
        elementos=document.getElementsByClassName("inputText");
        for(var i = 0; i < elementos.length; i++)
        {
            elementos[i].disabled = true;
        }
    }
</script>

javascript html php

asked by antonio sanchez 20.02.2018 в 16:40

source

1 answer

How to move the decimal point to the left n spaces with Jquery or JS? Show Alert or message after a header? PHP

score 4 · Accepted Answer

The current problem is that you are selecting all .inputText without discriminating in any way, so you will activate / deactivate all at once.

A possible solution would be to take advantage of the fact that the name of .inputText is going to have a part in common with the radio button (the id that comes from PHP $idres ). So instead of selecting all .inputText what you would do is select only those that have a name with the same id as the radius that was clicked.

You can do this by replacing this line:

elementos=document.getElementsByClassName("inputText");

For these two (commented):

// nos quedamos con el idres
var id = event.target.name.replace("radio","");
// seleccionamos sólo el Accion y Hallazgo con ese idres
elementos = document.querySelectorAll(".inputText[name=Accion"+id+"], .inputText[name=Hallazgo"+id+"]");

Optionally, to avoid any possible compatibility error with old browsers, you could pass the idres as a parameter to habilita / deshabilita or use some data-attribute or similar for it.

The result you can see it working here:

function habilita() {
  var id = event.target.name.replace("radio","");
  elementos = document.querySelectorAll(".inputText[name=Accion"+id+"], .inputText[name=Hallazgo"+id+"]");
  for (var i = 0; i < elementos.length; i++) {
    elementos[i].disabled = false;
  }
}

function deshabilita() {
  var id = event.target.name.replace("radio","");
  elementos = document.querySelectorAll(".inputText[name=Accion"+id+"], .inputText[name=Hallazgo"+id+"]");
  for (var i = 0; i < elementos.length; i++) {
    elementos[i].disabled = true;
  }
}

<fieldset>
  <legend>texto 1</legend>
  <label>  
    <input type='radio' name='radio1' value='1' onclick='deshabilita()'> Si  
  </label>
  <label>  
    <input type='radio' name='radio1' value='0' onclick='habilita()'> No  
  </label>
  <label>  
      <textarea name='Hallazgo1' disabled class='inputText'>Se tiene un hallazgo? </textarea> 
  </label>
  <label>  
    <textarea name='Accion1' disabled class='inputText'>Cual es la acción correctiva </textarea> 
  </label>
</fieldset>
<fieldset>
  <legend>texto 1</legend>
  <label>  
    <input type='radio' name='radio2' value='1' onclick='deshabilita()'> Si  
  </label>
  <label>  
    <input type='radio' name='radio2' value='0' onclick='habilita()'> No  
  </label>
  <label>  
      <textarea name='Hallazgo2' disabled class='inputText'>Se tiene un hallazgo? </textarea> 
  </label>
  <label>  
    <textarea name='Accion2' disabled class='inputText'>Cual es la acción correctiva </textarea> 
  </label>
</fieldset>
<fieldset>
  <legend>texto 3</legend>
  <label>  
    <input type='radio' name='radio3' value='1' onclick='deshabilita()'> Si  
  </label>
  <label>  
    <input type='radio' name='radio3' value='0' onclick='habilita()'> No  
  </label>
  <label>  
      <textarea name='Hallazgo3' disabled class='inputText'>Se tiene un hallazgo? </textarea> 
  </label>
  <label>  
    <textarea name='Accion3' disabled class='inputText'>Cual es la acción correctiva </textarea> 
  </label>
</fieldset>