web-dev-qa-db-de.com

Warum können Optionsfelder nicht "readonly" sein?

Ich möchte ein Optionsfeld anzeigen lassen, den Wert übermitteln, aber je nach den Umständen nicht bearbeiten. Deaktiviert funktioniert nicht, da der Wert nicht übermittelt wird (oder nicht?) Und das Optionsfeld grau dargestellt wird. Ich suche eigentlich nur mit Lesezugriff, aber aus irgendeinem mysteriösen Grund funktioniert es nicht.

Gibt es einen seltsamen Trick, den ich ziehen muss, um schreibgeschützt zu werden, um wie erwartet zu funktionieren? Soll ich es einfach in JavaScript machen?

Weiß jemand übrigens, warum schreibgeschütztes Funktionieren in Optionsfeldern nicht möglich ist, während es in anderen Eingabe-Tags funktioniert? Ist dies eine dieser unverständlichen Auslassungen in den HTML-Spezifikationen?

180
mcv

Ich habe nur eine Optionsschaltfläche vorgetäuscht, indem nur die nicht aktivierten Optionsschaltflächen deaktiviert wurden. Dadurch wird verhindert, dass der Benutzer einen anderen Wert auswählt, und der geprüfte Wert wird immer beim Senden gesendet.

Mit jQuery Readonly machen:

$(':radio:not(:checked)').attr('disabled', true);

Dieser Ansatz funktionierte auch für das Erstellen einer Auswahlliste mit der Ausnahme, dass Sie jede nicht ausgewählte Option deaktivieren müssen.

100
Megan

Optionsfelder müssten nur gelesen werden, wenn andere Optionen vorhanden sind. Wenn Sie keine anderen Optionen haben, kann ein aktiviertes Optionsfeld nicht deaktiviert werden. Wenn Sie andere Optionen haben, können Sie verhindern, dass der Benutzer den Wert ändert, indem Sie lediglich die anderen Optionen deaktivieren:

<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

Geige: http://jsfiddle.net/qqVGu/

191
Sampson

Dies ist der Trick, mit dem Sie gehen können.

<input type="radio" name="name" onclick="this.checked = false;" />
18
Sarfraz

Ich habe ein langes Formular (250+ Felder), das in eine Datenbank geschrieben wird. Es ist eine Online-Bewerbung. Wenn ein Administrator sich eine eingereichte Anwendung ansieht, wird das Formular mit Daten aus der Datenbank gefüllt. Eingabetexte und Textbereiche werden durch den Text ersetzt, den sie übermittelt haben, aber die Funkgeräte und Kontrollkästchen sind nützlich, um sie als Formularelemente zu speichern. Wenn Sie sie deaktivieren, wird das Lesen schwieriger. Das Festlegen der Eigenschaft .checked auf false onclick funktioniert nicht, da sie möglicherweise vom Benutzer überprüft wurde, der die App ausfüllt. Jedenfalls...

onclick="return false;"

funktioniert wie ein Zauber für das Deaktivieren von Radios und Checkboxen ipso facto.

10
humbolight

Die beste Lösung besteht darin, den geprüften oder ungeprüften Status (entweder vom Client oder vom Server) festzulegen und den Benutzer nach den Anweisungen nicht ändern zu lassen (d. H., Er kann nur lesbar gemacht werden):

<input type="radio" name="name" onclick="javascript: return false;" />
8
Vipresh

JavaScript-Weg - das hat für mich funktioniert.

<script>
$(document).ready(function() {
   $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>

Grund:

  1. $('#YourTableId').find('*') -> gibt alle Tags zurück.

  2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); durchläuft alle darin erfassten Objekte und deaktiviert Eingabe-Tags.

Analyse (Debugging):

  1. form:radiobutton wird intern als "input" -Tag betrachtet.

  2. Wie in der obigen Funktion (), wenn Sie versuchen, document.write(this.tagName); zu drucken.

  3. Wo auch immer in Tags Optionsfelder gefunden werden, gibt es ein Eingabe-Tag zurück.

Die obige Codezeile kann also mehr für Optionsfeld-Tags optimiert werden, indem Sie * durch die Eingabe ersetzen: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

2
user3702798

Ich habe einen Javascript-schweren Weg gefunden, um einen Readonly-Zustand für Kontrollkästchen und Optionsfelder zu erreichen. Es wird mit aktuellen Versionen von Firefox, Opera, Safari, Google Chrome sowie aktuellen und früheren Versionen von IE (bis IE7) getestet. 

Warum nutzen Sie nicht einfach die von Ihnen gewünschte behinderte Immobilie? Beim Drucken der Seite werden deaktivierte Eingabeelemente in grauer Farbe angezeigt. Der Kunde, für den dies implementiert wurde, wollte, dass alle Elemente die gleiche Farbe haben.

Ich bin mir nicht sicher, ob ich den Quellcode hier posten darf, da ich ihn während meiner Arbeit für ein Unternehmen entwickelt habe, aber ich kann die Konzepte sicherlich teilen.

Bei Onmousedown-Ereignissen können Sie den Auswahlstatus lesen, bevor die Klickaktion ihn ändert. Sie speichern diese Informationen und stellen diese Zustände dann mit einem Onclick-Ereignis wieder her.

<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>

Der Javascript-Teil davon würde dann so funktionieren (wieder nur die Konzepte):

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;
}

Sie können nun die Optionsfelder/Kontrollkästchen aktivieren/deaktivieren, indem Sie die Eigenschaften onclick und onmousedown der Eingabeelemente ändern.

2
Tom

Ich habe festgestellt, dass die Verwendung von onclick='this.checked = false;' in gewissem Umfang funktioniert hat. Ein angeklicktes Optionsfeld wurde nicht ausgewählt. Wenn jedoch ein Optionsfeld vorhanden war, das bereits ausgewählt war (z. B. ein Standardwert), würde dieses Optionsfeld deaktiviert.

<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>

Wenn Sie in diesem Szenario nur den Standardwert beibehalten und die anderen Optionsfelder deaktivieren, bleibt das bereits ausgewählte Optionsfeld erhalten, und es wird verhindert, dass es deaktiviert wird.

<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>

Diese Lösung ist nicht die eleganteste Methode, um zu verhindern, dass der Standardwert geändert wird. Es funktioniert jedoch unabhängig davon, ob Javascript aktiviert ist oder nicht.

1
JW8

Versuchen Sie das Attribut disabled, aber ich denke, Sie erhalten nicht den Wert der Optionsfelder . Oder setzen Sie stattdessen Bilder wie:

<img src="itischecked.gif" alt="[x]" />radio button option

Freundliche Grüße.

1
Tim

Eine relativ einfache Option wäre, eine Javascript-Funktion zu erstellen, die beim "onsubmit" -Ereignis des Formulars aufgerufen wird, um den Radiobutton wieder zu aktivieren, damit der Wert mit dem Rest des Formulars verbucht wird. 
Es scheint keine Auslassung von HTML-Spezifikationen zu sein, aber eine Entwurfsauswahl (eine logische, IMHO), ein Radiobutton kann nicht gelesen werden, da eine Schaltfläche nicht möglich ist, wenn Sie sie nicht verwenden möchten dann deaktivieren Sie es.

1
wintermute

Kennzeichnen Sie die nicht ausgewählten Optionsfelder als deaktiviert. Dies verhindert, dass sie auf Benutzereingaben reagieren und das markierte Optionsfeld löschen. Zum Beispiel:

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>
1
dpolican

Ich verwende ein JS plugin that Styles-Kontrollkästchen/Radio-Eingabeelemente und verwendete die folgende jQuery, um einen 'Readonly-Status' festzulegen, in dem der zugrunde liegende Wert zwar veröffentlicht wird, das Eingabeelement jedoch für den Benutzer nicht zugänglich ist glauben Sie an den beabsichtigten Grund, wir würden ein Readonly-Eingabeattribut verwenden ...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}
0
chopstik