Input text che si attiva/disattiva a seconda della checkbox

**mahamatt** · 17-01-2016, 21:27

Ciao a tutti,
ho una situazione di questo tipo in cui genero una form html caricando dati già inseriti:

Codice PHP:


<form name="myform">

<div class="row">
<input type="checkbox" name="inputCheck" onclick="enable_text(this.checked)" />
<label>Mele:</label>
<input type="text" name="testoLabel" class="medium" disabled="disabled" />
</div>

<div class="row">
<input type="checkbox" checked="checked" name="inputCheck" onclick="enable_text(this.checked)" />
<label>Pere:</label>
<input type="text" name="testoLabel" value="testo già presente #1" class="medium" />
</div>

<div class="row">
<input type="checkbox" checked="checked" name="inputCheck" onclick="enable_text(this.checked)" />
<label>Banane:</label>
<input type="text" name="testoLabel" value="testo già presente #2"class="medium" />
</div>

<div class="row">
<input type="checkbox" name="inputCheck" onclick="enable_text(this.checked)" />
<label>Pesche:</label>
<input type="text" name="testoLabel" class="medium" disabled="disabled" />
</div>

</form>

Occorrerebbe che, a ogni aggiunta/rimozione della check sulla checkbox, l'input[text] corrispondente diventasse automaticamente abilitato/disabilitato.

Link jsfiddle:
http://jsfiddle.net/mahamatt/qwm5cfL4/5/#&togetherjs=ts9NEyF7Hd

Nel box js ho provato a scrivere una piccola funzione che si dovrebbe attivare all'onclick, ma le mie conoscenze js sono troppo limitate...

Grazie in anticipo

**cavicchiandrea** · 17-01-2016, 22:38

Prova cosi

codice:

function enable_text(ele) {
    var stato = (ele.checked) ? false : true;
    document.myform.testoLabel.disabled = stato;
}

<div class="row">
<input type="checkbox" name="inputCheck" onclick="enable_text(this)" />
<label>Pesche:</label>
<input type="text" name="testoLabel" class="medium" disabled="disabled" />
</div>
ma anche se dovesse andare disabiliterebbe tutti i campi input

**mahamatt** · 17-01-2016, 23:04

Niente da fare, non funziona...

Comunque, se necessario, all'occorrenza posso intervenire sul php in modo da modificare l'output dei parametri "name" e "class".

**KillerWorm** · 17-01-2016, 23:22

Ciao, chiaramente si può risolvere in svariati modi.

Posto un esempio funzionante:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
  </head>
  <body>
    <form name="myform">
      <div class="row">
        <input type="checkbox" name="inputCheck" />
        <label>Mele:</label>
        <input type="text" name="testoLabel" class="medium" />
      </div>
      <div class="row">
        <input type="checkbox" checked="checked" name="inputCheck" />
        <label>Pere:</label>
        <input type="text" name="testoLabel" value="testo già presente #1" class="medium" />
      </div>
      <div class="row">
        <input type="checkbox" checked="checked" name="inputCheck" />
        <label>Banane:</label>
        <input type="text" name="testoLabel" value="testo già presente #2" class="medium" />
      </div>
      <div class="row">
        <input type="checkbox" name="inputCheck" />
        <label>Pesche:</label>
        <input type="text" name="testoLabel" class="medium" />
      </div>
    </form>  
    <script type="text/javascript">
      (function(){
        var rows = document.myform.querySelectorAll('.row')
          , l = rows.length
          , chk
        ;
        while(l--){
          chk = rows[l].querySelector('input[name=inputCheck]');
          chk.onchange = function(){
            this.parentNode.querySelector('input.medium').disabled = !this.checked;
          }
          chk.onchange();
        }
      })();
    </script>
  </body>
</html>

Personalmente non mi piace mescolare JavaScript con i tag HTML per cui ho separato le due parti.
Se hai bisogno di chiarimenti, chiedi pure.

**mahamatt** · 18-01-2016, 00:19

Ciao,
grazie mille, ho trasposto il codice nel mio progetto, ma ho notato che funziona solo se posizionato dopo l'html (dove l'hai posizionato tu, per intenderci). Se inserisco il codice javascript in un file .js che richiamo negli headers del sito, in console mi ritrovo questo messaggio di errore:

codice:

TypeError: document.myform is undefined

Ragion per cui chiedo: quel codice js deve stare necessariamente dopo l'html in questione?

Grazie ancora!

**badaze** · 18-01-2016, 00:46

E' vero. Ci sono tanti modi.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function enable_text(anId) {
 document.getElementById('t' + anId.id).disabled = anId.checked ? true : false;
} // function enable_text(anId)
//-->
</script>
</head>
<body>
<form name="myform">
<div class="row">
 <input type="checkbox" id="ic01" name="inputCheck" onclick="enable_text(this)" />
 <label>Mele:</label>
 <input type="text" id="tic01" name="testoLabel" class="medium" />
</div>
<div class="row">
 <input type="checkbox" id="ic02" name="inputCheck" onclick="enable_text(this)" />
 <label>Pere:</label>
 <input type="text" id="tic02" name="testoLabel" value="testo già presente #1"/>
</div>
<div class="row">
 <input type="checkbox" id="ic03"  name="inputCheck" onclick="enable_text(this)" />
 <label>Banane:</label>
 <input type="text" id="tic03" name="testoLabel" value="testo già presente #2" />
</div>
<div class="row">
 <input type="checkbox" id="ic04" name="inputCheck" onclick="enable_text(this)" />
 <label>Pesche:</label>
 <input type="text" id="tic04" name="testoLabel" class="medium"  />
</div>
</form>  
</body>
</html>

**mahamatt** · 18-01-2016, 00:58

Grazie!!
Il js sembra più pulito, però al momento preferisco la soluzione proposta da KillerWorm perché lascia intatto il codice html (dovrei aggiungere onclick e fare un ciclo for per assegnare un id univoco ad ogni elemento)

**KillerWorm** · 18-01-2016, 01:04

Ragion per cui chiedo: quel codice js deve stare necessariamente dopo l'html in questione?

Inserendolo così nell'head non funziona perché lo script verrebbe eseguito prima che gli elementi siano stati creati sul resto della pagina. In tal caso puoi usare window.onload.
Una cosa del genere:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
  </head>
  <script type="text/javascript">
    window.onload = function(){
      var rows = document.myform.querySelectorAll('.row')
        , l = rows.length
        , chk
      ;
      while(l--){
        chk = rows[l].querySelector('input[name=inputCheck]');
        chk.onchange = function(){
          this.parentNode.querySelector('input.medium').disabled = !this.checked;
        }
        chk.onchange();
      }
    }
  </script>
  <body>
    <form name="myform">
      <div class="row">
        <input type="checkbox" name="inputCheck" />
        <label>Mele:</label>
        <input type="text" name="testoLabel" class="medium" />
      </div>
      <div class="row">
        <input type="checkbox" checked="checked" name="inputCheck" />
        <label>Pere:</label>
        <input type="text" name="testoLabel" value="testo già presente #1" class="medium" />
      </div>
      <div class="row">
        <input type="checkbox" checked="checked" name="inputCheck" />
        <label>Banane:</label>
        <input type="text" name="testoLabel" value="testo già presente #2" class="medium" />
      </div>
      <div class="row">
        <input type="checkbox" name="inputCheck" />
        <label>Pesche:</label>
        <input type="text" name="testoLabel" class="medium" />
      </div>
    </form>  
  </body>
</html>

**mahamatt** · 18-01-2016, 01:50

Perfetto, così tengo tutto il javascript nel file relativo e non "sporco" il codice html...
Funziona!!
Grazie mille, gentilissimi

Discussione: Input text che si attiva/disattiva a seconda della checkbox

Strumenti discussione

Ricerca discussione

Visualizza

Input text che si attiva/disattiva a seconda della checkbox

Permessi di invio