2012-08-15 2 views
8

Gibt es ein Attribut oder eine Technik für HTML-Auswahlfelder, das readOnly="true" für HTML-Eingaben entspricht?Ein readOnly-Äquivalent für HTML Elemente auswählen

Ich habe ein Formularauswahlfeld, das ich deaktivieren möchte, aber es weitergibt, wenn das Formular veröffentlicht wird. Wenn dies eine HTML-Eingabe wäre, würde ich so etwas wie diese

$('select_id').setAttribute('readOnly', 'true'); 

tun und der Browser würde das Feld als nicht bearbeitet machen, aber es ist Wert würde noch an das Backend übergeben werden. Ich möchte etwas ähnliches für eine HTML-Auswahl, aber Folgendes tun

funktioniert nicht. Das Attribut wurde erfolgreich zum DOM hinzugefügt, aber der Browser rendert es weiterhin als auswählbar.

Ich weiß, ich könnte die

$('#input_id').disabled(); 

folgende tun, aber wenn ein Feld deaktiviert sein Wert ist nicht an das Backend übergeben.

Ich möchte eine Möglichkeit, dieses Auswahlfeld zu deaktivieren, aber immer noch an das Back-End weitergeben.

(Beispiele verwenden Prototype JS, aber ich habe Interesse an einer allgemeinen Lösung)

Antwort

22

Alle deaktivieren, aber die gewählte Option:

<select> 
<option disabled="disabled">1</option> 
<option selected="selected">2</option> 
<option disabled="disabled">3</option> 
</select> 

diese Weise wird die Drop-Down-noch funktioniert (und übergibt seinen Wert), aber der Benutzer kann keinen anderen Wert auswählen.

+2

nicht sicher, wer nach unten gestimmt oder warum, dies scheint zu funktionieren (zumindest in Chrome, testen andere Browser jetzt) ​​ –

+3

@AlanStorm, das ist ein höllischer Test :)) –

+2

Das Problem mit dieser Lösung ist, dass der Benutzer immer noch deaktivieren Optionen mit STRG + Klick –

3

deaktiviert Klasse hinzufügen:

.disabled{ 
    color: grey; 
} 

wenn Klasse vorhanden Verwendung standardmäßig auf Fokus verhindern und auf klicken, und dbl Klick:

$('#el').bind('click dblclick focus').function(event){ 
    if ($(this).hasClass('disabled')) event.preventDefault(); 
}); 
+4

Beachtenswert für zukünftige googlers Dieses Beispiel scheint usin zu sein g jQuery. –