Warum können Optionsfelder nicht "schreibgeschützt" sein?

Ich möchte ein Optionsfeld anzeigen, dessen Wert übermitteln lassen, aber je nach den Umständen nicht bearbeitbar haben. Deaktiviert funktioniert nicht, da der Wert nicht übermittelt wird (oder?) Und das Optionsfeld ausgegraut ist. Schreibgeschützt ist wirklich das, wonach ich suche, aber aus irgendeinem mysteriösen Grund funktioniert es nicht.

Gibt es einen seltsamen Trick, den ich ausführen muss, damit schreibgeschützt wie erwartet funktioniert? Sollte ich es stattdessen einfach in JavaScript tun?

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

Ich habe schreibgeschützt ein Optionsfeld gefälscht, indem ich nur die nicht aktivierten Optionsfelder deaktiviert habe. Es verhindert, dass der Benutzer einen anderen Wert auswählt, und der aktivierte Wert wird immer beim Senden veröffentlicht.

Mit jQuery schreibgeschützt machen:

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

Dieser Ansatz funktionierte auch, um eine Auswahlliste schreibgeschützt zu machen, außer dass Sie jede nicht ausgewählte Option deaktivieren müssen.

Optionsfelder müssen nur dann schreibgeschützt sein, wenn andere Optionen verfügbar 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/

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

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

Ich habe ein langes Formular (mehr als 250 Felder), das in einer Datenbank veröffentlicht wird. Es ist eine Online-Bewerbung. Wenn sich ein Administrator einen eingereichten Antrag ansieht, wird das Formular mit Daten aus der Datenbank gefüllt. Eingabetexte und Textbereiche werden durch den von ihnen eingereichten Text ersetzt, aber die Radios und Kontrollkästchen sind nützlich, um sie als Formularelemente beizubehalten. Wenn Sie sie deaktivieren, sind sie schwerer zu lesen. Das Setzen der Eigenschaft .checked auf false onclick funktioniert nicht, da sie möglicherweise vom Benutzer überprüft wurden, der die App ausfüllt. Jedenfalls...

onclick="return false;"

funktioniert wie ein Zauber, um Radios und Kontrollkästchen ipso facto zu deaktivieren.

Die beste Lösung besteht darin, den aktivierten oder nicht aktivierten Status (entweder vom Client oder vom Server) festzulegen und den Benutzer nicht nach Stationen (dh schreibgeschützt) die folgenden Schritte ändern zu lassen:

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

Ich habe mir eine Javascript-schwere Methode ausgedacht, um einen schreibgeschützten Status für Kontrollkästchen und Optionsfelder zu erreichen. Es wird gegen aktuelle Versionen von Firefox, Opera, Safari, Google Chrome sowie gegen aktuelle und frühere Versionen von IE (bis auf IE7) getestet.

Warum nicht einfach die von Ihnen gewünschte Behindertenimmobilie nutzen? Beim Drucken der Seite werden deaktivierte Eingabeelemente in grauer Farbe angezeigt. Der Kunde, für den dies implementiert wurde, wollte, dass alle Elemente dieselbe 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 jetzt die Optionsfelder / Kontrollkästchen aktivieren / deaktivieren, indem Sie die Eigenschaften onclick und onmousedown der Eingabeelemente ändern.

JavaScript-Methode - das hat bei mir funktioniert.

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

Grund:

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

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

Analyse (Debugging):

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

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

3. Überall dort, wo in Tags Optionsfelder gefunden werden, wird ein Eingabe-Tag zurückgegeben.

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

Eine ziemlich einfache Option wäre, eine Javascript-Funktion zu erstellen, die beim "onsubmit" -Ereignis des Formulars aufgerufen wird, um den Radiobutton zurück zu aktivieren, sodass sein Wert mit dem Rest des Formulars veröffentlicht wird.
Es scheint keine Auslassung in HTML-Spezifikationen zu sein, aber eine Designauswahl (eine logische, IMHO), ein Radiobutton kann nicht schreibgeschützt sein, wie es eine Schaltfläche nicht sein kann, wenn Sie sie dann nicht verwenden möchten deaktiviere es.

Ich fand, dass die Verwendung onclick='this.checked = false;'bis zu einem gewissen Grad funktionierte. Ein Optionsfeld, auf das geklickt wurde, wurde nicht ausgewählt. Wenn jedoch ein Optionsfeld bereits ausgewählt war (z. B. ein Standardwert), wird dieses Optionsfeld nicht mehr ausgewählt.

<!-- 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 den Standardwert in Ruhe lassen und die anderen Optionsfelder deaktivieren, wird das bereits ausgewählte Optionsfeld beibehalten und verhindert, dass es nicht ausgewählt 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. Sie funktioniert jedoch unabhängig davon, ob Javascript aktiviert ist oder nicht.

Markieren Sie die nicht ausgewählten Optionsfelder als deaktiviert. Dies verhindert, dass sie auf Benutzereingaben reagieren und das aktivierte Optionsfeld löschen. Beispielsweise:

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

Probieren Sie das Attribut aus disabled, aber ich denke, Sie erhalten den Wert der Optionsfelder nicht. Oder stellen Sie stattdessen Bilder wie folgt ein:

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

Freundliche Grüße.

Ich verwende ein JS- Plugin , das Kontrollkästchen / Funkeingabeelemente formatiert und die folgende jQuery verwendet, um einen "schreibgeschützten Status" zu erstellen, in dem der zugrunde liegende Wert noch gebucht wird, das Eingabeelement jedoch für den Benutzer unzugänglich erscheint. Dies ist meines Erachtens der beabsichtigte Grund wir würden ein schreibgeschütztes Eingabeattribut verwenden ...

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

Wie wäre es, ein "On_click ()" - Ereignis in JS zu erfassen und wie hier zu überprüfen?:

http://www.dynamicdrive.com/forums/showthread.php?t=33043