Problema GetElementById

[ruben85]

Ho creato questa funzione:

function enabledisable() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
if (document.getElementById('group').checked) {
document.getElementById('enabledisable').disabled=false; } 	
else { document.getElementById('enabledisable').disabled=true;}} }

Viene richiamata nel seguente modo:

<select id="enabledisable" multiple="multiple" disabled="disabled">
...
</select>
<input id="group" type="checkbox" onClick="enabledisable()" />

In un file html semplice ciò funziona alla grande, ma se all'interno del tag <form> metto delle tabelle, e richiamo <select id="enabledisable" multiple="multiple" disabled="disabled"> e <input id="group" type="checkbox" onClick="enabledisable()" /> dentro due <td></td>, tutto ciò non funziona. Se invece lascio il select dentro la tabella e input lo metto in fondo al file html FUORI dal form, tutto funziona. Sto impazzendo! Forse ho sbagliato a mettere dentro il tag form le tabelle... potrebbe essere quello il problema?

Per i veterani, posto il mio codice html, sperando che ci sia qualcuno che, grazie al dettaglio misto alla sua pazienza, possa aiutarmi a trovare la ragione del problema. Un grazie in anticipo!

<form name="creautente" id="creautente" action="index.php?option=com_rubrica&task=creaUtente" method="post">
<div class="contenitore">
<table class="sx">
<tr>
<td>Nome</td>
<td><input type="textbox" name="nome" id="nome" /></td>
</tr>
<tr>
<td>Cognome</td>
<td><input type="textbox" name="cognome" id="cognome" /></td>
</tr>
<tr>
<td>Cellulare</td>
<td><input type="textbox" name="cellulare" id="cellulare" /></td>
</tr>
<tr>
<td>Casa</td>
<td><input type="textbox" name="casa" id="casa" /></td>
</tr>
<tr>
<td>Ufficio</td>
<td><input type="textbox" name="ufficio" id="ufficio" /></td>
</tr>
<tr>
<td>Fax</td>
<td><input type="textbox" name="fax" id="fax" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="textbox" name="email" id="email" /></td>
</tr>
</table>
<table>
<tr>
<td><input id="group" type="checkbox" onClick="enabledisable()" /></td>
<td>Gruppi</td>
<td><select id="enabledisable" multiple="multiple" disabled="disabled">
<?php foreach ($this->gruppi as $gruppo) { 
echo '<option>'.$gruppo->descrizione.'</option>'; }?>
</select></td>
</tr>
</table>
</div>
</form>

[artorius]

se posso consigliarti:

<select id="enabledisable" multiple="multiple" disabled="disabled">
...
</select>
<input id="group" type="checkbox" onClick="enabledisableCheck(this)" />

function enabledisableCheck(elem) { 
   if(elem.checked) {
      document.getElementById('enabledisable').removeAttribute("disabled"); 
   } 	
   else { 
      document.getElementById('enabledisable').setAttribute("disabled", "true");
   }
};

Non chiamare mai una funzione con lo stesso valore che hai dato ad un altro campo (id, name o qualunque cosa).
Per il resto, è più pratico passare l'elemento con this nell'onclick, ed il disabled se messo a false, sua alcuni browser viene interpretato come disabilitato.

[ruben85]

Wow! Grandioso! Hai brillantemente risolto i miei problemi! Nel frattempo ho trovato la mia soluzione:

function enabledisableCheck() {
	if (document.getElementById('checkbox').check) {
		document.getElementById('select').disabled = 'disabled';
		document.getElementById('checkbox').check = false;
	}
	else {
		document.getElementById('select').disabled = true;
		document.getElementById('checkbox').check = true;
	}
}

Ho aggiunto rispettivamente document.getElementById('checkbox').check = false; e document.getElementById('checkbox').check = true; all'interno delle 2 condizioni.
Comunque utilizzo la tua soluzione, che è sicuramente + pulita. Altra domanda: per rendere tale funzione compatibile anche ai browser di vecchia data come faccio? Mi sconsigli quindi di usare l'assegnamento document.getElementById('select').disabled, in favore di removeAttribute e setAttribute? E ancora: conosci qualche editor carino di javascript per linux? Grazie sei un grande ;-)

[artorius]

Dunque, le risposte alle tue domande:
1- gli unici browser su cui document.getElementById non funziona (se non mi sbaglio) sono gli IE antecedenti alla 6 (quindi IE5-) e qualche versione di Netscape (anche se non ne sono sicuro), quello che so per certo è che di solito si fa:

var elem = null;
if(document.getElementById)
  elem = document.getElementById("MyId");
else
  elem = document.all["MyId"];

e dovrebbe andare su tutti i browser.

2- removeAttribute e setAttribute sono le funzioni DOM per impostare gli attributi di un element node, rispetto a elem.disabled che è un assegnamento di proprietà, sono più puliti perché, in sostanza, non partono dal presupposto che l'attributo esista, ma lo istanziano loro, inoltre, removeAttributo RIMUOVE completamente l'attributo, mentre fare elem.disabled = false, non rimuove l'attributo, ma ne modifica solo il valore e, con gli attributi selected e disabled, in alcuni browser mettere disabled = false o "" non basta a togliere il disabilita.

3- Su linux l'unico editor per JS che conosco, e trovo valido, è Aptana Studio, non tanto perché è veloce o bello (è un Eclipse limitato a HTML e JS, che puoi estendere con PHP ed altra roba), ma perché ha l'auto completamento di JS, cosa che NON ho trovato praticamente da nessuna parte...

[ruben85]

Grazie mille il tuo aiuto è stato preziosissimo :-)