Newsgroup: it.comp.lang.javascript
Titolo: Checkbox grigia

Una checkbox puo' essere checked o meno.
Io vorrei avere anche la possiblità di renderla "grigia" (avete
presente quando selezionate da un  menu ad albero solo certe voci e
quindi la checkbox appare sì col check ma grigia) quando richiamo
l'evento onClick da una checkbox "figlia"....
Idee?



No, non ho presente ma ... stai parlando di un disabled="true"?
-- 
"E' l' ignoranza che crea l'intolleranza
 di gente cieca e senza coscienza"
									  S.S.S.

L'effetto è simile, ma voglio fare in modo che lo sfondo della
casellina non sia piu' bianco ma grigio.
Sono riuscito a cambiare solamente lo sfondo del riquadro attorno alla
casella.

Bondo ha scritto:

Le checkbox html non hanno di per se' contezza della struttura ad albero di
cui parli.
Per quello che vuoi fare ti serve un controllo personalizzato, che conosca
le checkbox "figlie" e assuma differenti stati in base a seconda che queste
siano selezionate tutte, in parte o nessuna.
-- 
Studiare e' lento, quando non hai professori rock

E questo l'ho già fatto... io voglio sapere se si puo' cambiare il
colore di sfondo della casellina ed eventualmente del segno di spunta
(mi va bene anche se funziona solo per IE).

 (mi va bene anche se funziona solo per IE).
no, pero' creare un controllo personalizzato con tre immagini
corrispondenti ai tre diversi stati non e' affatto impossibile




Potresti fare qualcosa del genere:
file HTML
<html>
<head>
<style type="text/css">
.cb{
 -moz-binding: url("./cb.xml#cb") !important;
 width:16px;
 height:16px;
 font-size:16px;
}
.cbie {
 behavior:url(cb.htc)
 width:16px;
 height:16px;
 font-size:16px;
}
</style>
<script type="text/javascript">
function setcheck(id){
 var d=document.getElementById("moz"+id);
 if(d.checkit){
	d.checkit();
 } else {
 	var d=document.getElementById("ie"+id);
	d.checked="x";
 }
}
</script>
</head>
<body>
<form>
<input name="cbox" type="checkbox" onclick="setcheck('cbox');"/>
<div class="cbie" id="iecbox"></div>
<div class="cb" id="mozcbox"></div>
<input name="text" type="text" value="deltesto"/>
</form>
</body>
</html>
File cb.xml (per Gecko)
<?xml version="1.0"?>
<bindings id="cbbind"
   xmlns="
http://www.mozilla.org/xbl
"
   xmlns:html="
http://www.w3.org/1999/xhtml
"
xmlns:xul="
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
"
   xmlns:xbl="
http://www.mozilla.org/xbl
">
 <binding id="cb">
 <content>
  <html:div>
   <children/>
  </html:div>
 </content>
 <implementation>
   <constructor><![CDATA[
        this.init();
   ]]></constructor>
   <method name="init">
   <body><![CDATA[
    this.style.border="1px solid #ff0000";
    this.checkit();
   ]]></body>
   </method>
   <method name="checkit">
   <body><![CDATA[     
    var mcb=document.getElementsByName(this.id.substr(3))[0];
    if(mcb.checked){
      this.innerHTML="X";
      this.style.backgroundColor="#8f8f8f";
    } else {
      this.innerHTML=" ";
      this.style.backgroundColor="#fff";
    }
   ]]></body>
   </method>
  </implementation>
 </binding>
</bindings>
File cb.htc (per IE)
<PUBLIC:COMPONENT>
<PUBLIC:PROPERTY NAME="checked" PUT="setchecked"/>
<SCRIPT LANGUAGE="JScript">
function tick(){
    try{
    var mcb=window.document.getElementsByName(id.substr(2))[0];
    if(mcb.checked){      
      innerHTML="X";
      style.backgroundColor="#8f8f8f";
    } else {
      innerHTML="&nbsp;&nbsp;";
      style.backgroundColor="#fff";
    }
    } catch(e){alert(e);}
}
window.attachEvent("onload", docinit);
function docinit(){
    style.border="1px solid #ff0000";
    style.width="16px";
    tick();
}
function setchecked(){
 tick();
}
</SCRIPT>
</PUBLIC:COMPONENT>
N.B. e' solo un esempio da cui partire.
'bye

 non e` << disabled="disabled" >>?
Sì, così dicono (io ho sempre usato true/false ma nelle specifiche w3 c'è
scritto "disabled", non so da che revisione...)
-- 
"Ho smesso di fumare.
 Vivrò una settimana di più.
 E in quella settimana pioverà a dirotto"
									    W.A.

 scritto "disabled", non so da che revisione...)
A livello di DTD, in XHTML da sempre: Disabled è uno di quei valori, come
selected ad esempio, che non necessitano di parametri. La sola presenza,
significa che "lo sono". Ma un attributo senza alcun valore associato,
poteva andar bene ai tempi di HTML, ma secondo la sintassi XML renderebbe
un documento "mal formato". Per questo vi è la "ripetizione" del valore con
il nome dell'attributo.
Impostare valori come "true", ad esempio, sarebbe risultato fuorviante
perché avrebbe significato che al medesimo attributo si poteva impostare
anche altri valori, come "false". Un elemento con disabled impostato a
"false", è sempre disabled invece. In quanto basta, appunto, la presenza
dell'attributo a definirlo. Non il valore dello stesso.
-- 
~ Neanche il futuro e' piu' quello di una volta.

 dell'attributo a definirlo. Non il valore dello stesso.
e quindi come dovresti fare per abilitare? .disabled=null?
-- 
"qualcuno è andato per età
 qualcuno perchè già dottore
 e insegue una maturità, si è sposato, fa carriera
 ed è una morte un po' peggiore"
									    F.G.

 N.B. e' solo un esempio da cui partire.
Non ti pare un po' troppo esagerato, per il problema che deve risolvere? :)
Premesso che evito i behavior di IE come la peste, anche nelle intranet,
perché - sfortunatamente - non sono performanti come la controparte gecko
(ho già parlato in questo NG delle mie vicessitudini con tali
componenti..); direi che nel suo caso basta un elemento "checkbox"
disabled, nel caso in cui gli interessi solo come "feedback" utente (ovvero
non gli interessi cliccare direttamente su tale elemento, ma solo sui
"sottofigli", una volta disabled); oppure in caso contrario, un semplice
link con immagine di background che contenga i tre "stati" (check vuoto,
spuntato, e spuntato grigio) da impostare tramite CSS o JS in relazione
alle corrispettive azioni.
Entrambi i metodi dovrebbero funzionare anche su più browser di quanto non
lo facciano i binding e i behavior di gecko e ie.
-- 
~ Chi segue gli altri, non arriva mai primo.

 e quindi come dovresti fare per abilitare? .disabled=null?
Attento, fin'ora si è parlando di codice di markup, non del binding js.
Non confondere le due cose.
A livello di binding, la proprietà "disabled" esiste sempre,ovviamente.
E' booleana, e può assumere valore "true" o "false", rispettivamente se nel
tag è presente o meno l'attributo relativo.
Ma a livello di markup, vale il discorso che ti ho fatto nel post
precedente.
-- 
~ Io sono il più importante dei miei problemi.