Beschränken Sie die Auswahl der SELECT-Option, ohne das Feld zu deaktivieren

StackOverflow https://stackoverflow.com/questions/43874

Frage

Ich habe ein SELECT-Feld mit Mehrfachauswahl, dessen Wert der Endbenutzer nicht ändern kann.

Aus Gründen der Benutzeroberfläche möchte ich dies tun können, ohne das Attribut „disabled="true" zu verwenden.Ich habe versucht, onmousedown, onfocus, onclick zu verwenden und jeweils auf Unschärfe oder „False“ einzustellen, aber ohne Erfolg.

Ist das möglich oder versuche ich das Unmögliche zu tun?

War es hilfreich?

Lösung

Ich weiß, dass Sie erwähnt haben, dass Sie das nicht möchten, aber ich denke tatsächlich, dass die Verwendung des disabled Attribut ist eine bessere Lösung:

<select multiple="multiple">
    <option value="volvo" selected="true" disabled="disabled">Volvo</option>
    <option value="saab" disabled="disabled">Saab</option>
    <option value="opel" disabled="disabled">Opel</option>
    <option value="audi" disabled="disabled">Audi</option>
</select>

Bei Bedarf können Sie jederzeit die geben select A class und stylen Sie es mit CSS.Diese Lösung funktioniert in allen Browsern, unabhängig von den Skriptfunktionen.

Andere Tipps

Könntest du es mit einem machen? onchange Ereignis?

<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">

Am besten tauschen Sie die Optionen im Auswahlfeld aus.Wenn Sie in diesem Feld nur eine Antwort haben, spielt es keine Rolle, ob diese anklickbar ist.

Ich würde jedoch versuchen, einen anderen Weg zu finden, da dies anscheinend zu Frustration beim Benutzer führen würde.Stellen Sie sich dieses Benutzerszenario vor:

  1. „Sehen Sie, eine Auswahlbox mit Optionen.“
  2. klicken
  3. „Hm, warum hat das nicht funktioniert?“
  4. klicken
  5. klicken!
  6. „Dieses blöde Ding ist kaputt, ich komme nie wieder hierher.“

Wenn Sie die Auswahl durch HTML-Text ersetzen, wird dasselbe Ziel erreicht.Dies ist für die meisten wichtigen Javascript-Frameworks eine ziemlich einfache Aufgabe.

@Jack & @17 von 26, guter Punkt, aber der Endbenutzer erwartet, dass das Auswahlfeld deaktiviert ist, damit Verwirrung kein Problem sein sollte.

Ich hätte klarer sagen sollen, warum ich die Steuerung nicht einfach deaktivieren konnte.

Die Anwendung, die dies verwenden wird, muss die Auswahl der Optionen deaktivieren und es ist erforderlich, dass das „gesperrte“ Steuerelement weiterhin das Erscheinungsbild normaler Formularsteuerelemente beibehält.

Probieren Sie diesen Auslöser aus.

<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>

Es gibt nämlich eine neue Ergänzung zu CSS3 95 % kompatibel mit allen aktuellen Browsern außer Opera Mini, aufgerufen pointer-events.Einfach ausgedrückt: Sie können die Standardaktion auf einem „deaktivieren“. SELECT oder jedes andere Element, und dennoch in der Lage sein, bestimmte Ereignisse darauf auszuführen ...

Den Artikel von Chris Coyier können Sie hier lesen Geben Sie hier die Linkbeschreibung ein.

Ist das näher an dem, was Sie suchen ...Es tut mir leid, dass ich keine meiner eigenen Codierungsbeispiele bereitstellen konnte ...

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top