mi è venuta in mente un modo javascript-pesante per raggiungere uno stato di sola lettura per le caselle di controllo e pulsanti radio. È testato contro le versioni correnti di Firefox, Opera, Safari, Google Chrome, così come le versioni attuali e precedenti di IE (fino a IE7).
Perché non utilizzare semplicemente la proprietà disattivata che chiedi? Quando si stampa la pagina, gli elementi di input disabilitati vengono visualizzati in un colore grigio. Il cliente per cui è stato implementato voleva che tutti gli elementi risultassero dello stesso colore.
Non sono sicuro di poter pubblicare il codice sorgente qui, mentre lo sviluppavo mentre lavoravo per un'azienda, ma posso sicuramente condividere i concetti.
Con eventi onmousedown, è possibile leggere lo stato di selezione prima che l'azione di clic la modifichi. Quindi memorizzi queste informazioni e quindi ripristini questi stati con un evento onclick.
<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>
<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>
La porzione JavaScript di questo sarebbe quindi lavorare simili (nuovamente solo i concetti):
var selectionStore = new Object(); // keep the currently selected items' ids in a store
function storeSelectedRadiosForThisGroup(elementName) {
// get all the elements for this group
var radioOrSelectGroup = document.getElementsByName(elementName);
// iterate over the group to find the selected values and store the selected ids in the selectionStore
// ((radioOrSelectGroup[i].checked == true) tells you that)
// remember checkbox groups can have multiple checked items, so you you might need an array for the ids
...
}
function setSelectedStateForEachElementOfThisGroup(elementName) {
// iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
...
// make sure you return false here
return false;
}
È ora possibile abilitare/disabilitare i pulsanti di opzione/caselle cambiando l'onclick e onmousedown proprietà gli elementi di input.
Pensate da il punto di vista di un utente. Perché visualizzare un pulsante che non possono fare clic? –
Perché visualizzare un pulsante non è possibile fare clic? Perché voglio che sappiano che il pulsante è lì, ma non voglio che siano in grado di fare clic in questo momento. Ma forse dopo. È una forma dinamica, dopo tutto. Perché un pulsante di opzione dovrebbe essere diverso da qualsiasi altro campo di input? – mcv
Ecco le specifiche: http://www.w3.org/TR/html401/interact/forms.html#h-17.12.2 "I seguenti elementi supportano l'attributo readonly: INPUT e TEXTAREA." Che è ovviamente sbagliato. Di nuovo qui, però, vediamo un riepilogo più accurato: http://www.w3.org/TR/WD-forms-970402#readonly "READONLY si applica agli elementi di INPUT di tipo TEXT o PASSWORD e al TEXTAREA elemento." Sembra che questo è scivolato tra le lacune di recs e specifiche. – graphicdivine