Eu vim com uma maneira pesada de javascript para alcançar um estado somente leitura para caixas de seleção e botões de opção. É testado em relação às versões atuais do Firefox, Opera, Safari, Google Chrome, bem como às versões atuais e anteriores do IE (até o IE7).
Por que não simplesmente usar a propriedade desativada solicitada? Ao imprimir a página, os elementos de entrada desabilitados saem na cor cinza. O cliente para o qual isso foi implementado queria que todos os elementos saíssem da mesma cor.
Não tenho certeza se tenho permissão para postar o código fonte aqui, pois desenvolvi isso enquanto trabalhava para uma empresa, mas certamente posso compartilhar os conceitos.
Com eventos onmousedown, você pode ler o estado da seleção antes que a ação do clique o altere. Então, você armazena essas informações e restaura esses estados com um 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>
A parte javascript disso funcionaria assim (novamente apenas os conceitos):
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;
}
Agora você pode ativar / desativar os botões de opção / caixas de seleção alterando as propriedades onclick e onmousedown dos elementos de entrada.