Uneori avem nevoie pe UI sa facem un element dintr-un drop-down disable. Utilizatorul sa il poata vedea, dar sa nu il poata selecta. Aceasta varianta este foarte utila cand un update la o aplicatie deja existenta, unele optiuni dispar. Pana cand toti utilizatori o sa isi faca update la configuratie( backward compatibility).
Pe fiecare optine dintr-un select avem atributul disable ce care il putem seta. Pana aici totul pare in regula:
Ar aparea ceva de genul acesta:
Singura problema este cu IE. Acesta nu suporta acest atribut. Pentru a rezolva acest neajuns putem sa folosim urmatorul cod javascript:
Pe fiecare optine dintr-un select avem atributul disable ce care il putem seta. Pana aici totul pare in regula:
<select name="telefon"> <option value="1">Nokia</option> <option value="2" disabled="disabled">LG</option> <option value="3">Samsung</option></select>
Optiunea de LG nu o sa poata fi selectata, dar utilizatorul o poate vizualiza, iar din codul de java script se poate selecta aceasta valoare.Ar aparea ceva de genul acesta:
Singura problema este cu IE. Acesta nu suporta acest atribut. Pentru a rezolva acest neajuns putem sa folosim urmatorul cod javascript:
<script>
function AddOptionsDisabledSupport(){
var allSelectItems = document.getElementsByTagName('select');
for(var i=0; i < allSelectItems.length; i++){
allSelectItems[i].onchange= function(){
if(this.options[this.selectedIndex].disabled){
if(this.options.length<=1){
this.selectedIndex = -1;
}else
if(this.selectedIndex < this.options.length - 1){
this.selectedIndex++;
}else{
this.selectedIndex--;
}
}
}
//Change the color to gray.
for(var j=0; j < allSelectItems[i].options.length; j++){
if(allSelectItems[i].options[j].disabled){
allSelectItems[i].options[j].style.color = '#CCC';
}
}
}
}
//Run each time when page is loaded.
window.attachEvent("onload", AddOptionsDisabledSupport)
</script>
Iar de acuma acest atribut o sa poata fi folosit si pe IE.
Totusi, incepand cu IE >= 8.0, option disabled e suportat si de IE..
ReplyDeletejquery, vreau jquery...
ReplyDeleteAcuma am vazut commentul, in seara asta pun si vs jquery.
ReplyDeleteDoar ca nu tot timpul avem jquery la indemana.