beispiel - html form checkbox



Können HTML-Kontrollkästchen auf Nur lesen eingestellt werden? (20)

Ich dachte, sie könnten es sein, aber da ich mein Geld nicht dort hinlege, wo mein Mund war (sozusagen), hat das Einstellen des Readonly-Attributs eigentlich gar nichts zu tun.

Ich möchte lieber Disabled nicht verwenden, da die überprüften Kontrollkästchen mit dem Rest des Formulars übermittelt werden sollen. Ich möchte nur nicht, dass der Client sie unter bestimmten Umständen ändern kann.

https://ffff65535.com


Ich möchte nur nicht, dass der Client sie unter bestimmten Umständen ändern kann.

READONLY selbst wird nicht funktionieren. Sie können etwas funky mit CSS tun, aber wir machen sie normalerweise deaktiviert.

WARNUNG: Wenn sie zurückgeschickt werden, kann der Kunde sie ändern, Punkt. Sie können sich nicht auf readonly verlassen, um zu verhindern, dass ein Benutzer etwas ändert. Das könnte immer Fiddler oder einfach nur die HTML mit Firebug oder so etwas tun.


Aufbauend auf den obigen Antworten, wenn Sie jQuery verwenden, kann dies eine gute Lösung für alle Eingaben sein:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

Ich verwende dies mit Asp.Net MVC, um einige Formularelemente schreibgeschützt zu setzen. Obiges funktioniert für Text und Kontrollkästchen, indem Sie einen übergeordneten Container als .readonly festlegen, z. B. die folgenden Szenarien:

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>

Beitrag sehr sehr spät ... aber trotzdem. Verwenden Sie jQuery beim Laden der Seite, um alle Kontrollkästchen außer dem aktuell ausgewählten Kontrollkästchen zu deaktivieren. Stellen Sie dann den aktuell ausgewählten als schreibgeschützt ein, sodass er ähnlich aussieht wie die deaktivierten. Der Benutzer kann den Wert nicht ändern, und der ausgewählte Wert wird weiterhin übergeben.


Der Hauptgrund, warum die Leute ein schreibgeschütztes Kontrollkästchen und (auch) eine schreibgeschützte Radiogruppe wünschen, besteht darin, dass Informationen, die nicht geändert werden können, dem Benutzer in der Form, in der sie eingegeben wurden, zurückgegeben werden können.

OK deaktiviert wird dies tun - leider sind deaktivierte Bedienelemente nicht über die Tastatur bedienbar und fallen daher unter die Barrierefreiheitsgesetze. Dies ist der größte Hangup in HTML, den ich kenne.


Dies stellt ein kleines Usability-Problem dar.

Wenn Sie eine Checkbox anzeigen möchten, aber nicht mit ihr interagieren wollen, warum dann auch eine Checkbox?

Mein Ansatz wäre jedoch, deaktiviert zu verwenden (der Benutzer erwartet, dass ein deaktiviertes Kontrollkästchen nicht bearbeitbar ist, anstatt JS zu verwenden, damit ein aktiviertes nicht funktioniert) und einen Formularübergabe-Handler mit Javascript hinzuzufügen, das Kontrollkästchen direkt vor dem Formular aktiviert eingereicht. Auf diese Weise erhalten Sie Ihre Werte veröffentlicht.

also etwa so:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}


Ich hätte die Antwort von ConroyP kommentiert, aber das erfordert 50 Reputation, die ich nicht habe. Ich habe genug Ruf, um eine andere Antwort zu veröffentlichen. Es tut uns leid.

Das Problem mit der Antwort von ConroyP ist, dass das Kontrollkästchen unveränderbar gemacht wird, indem es nicht einmal auf der Seite eingefügt wird. Obwohl Electrons_Ahoy nicht so viel vorschreibt, wäre die beste Antwort diejenige, in der das unveränderbare Kontrollkästchen ähnlich aussehen würde, wenn nicht dasselbe wie das veränderbare Kontrollkästchen, wie es der Fall ist, wenn das Attribut "deaktiviert" angewendet wird. Eine Lösung, die die zwei Gründe anspricht, die Electrons_Ahoy angibt, das Attribut "disabled" nicht verwenden zu wollen, wäre nicht unbedingt ungültig, weil es das Attribut "disabled" verwendet hätte.

Angenommen, zwei boolesche Variablen $ checked und $ disabled:

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

Das Kontrollkästchen wird als aktiviert angezeigt, wenn $ checked wahr ist. Das Kontrollkästchen wird als nicht markiert angezeigt, wenn $ checked auf false gesetzt ist. Der Benutzer kann den Status des Kontrollkästchens ändern, wenn und nur wenn $ disabled false ist. Der Parameter "mein_Name" wird nicht gepostet, wenn das Kontrollkästchen vom Benutzer deaktiviert ist oder nicht. Der Parameter "my_name = 1" wird gesendet, wenn das Kontrollkästchen vom Benutzer aktiviert ist oder nicht. Ich glaube, das ist es, wonach Electrons_Ahoy gesucht hat.


Ich habe das verwendet, um die Ergebnisse zu erzielen:

<input type=checkbox onclick="return false;" onkeydown="return false;" />

Ich weiß, dass "Behinderte" keine akzeptable Antwort ist, da der Op es posten möchte. Sie müssen die Werte jedoch immer auf der Server-Seite EVEN validieren, wenn Sie die Option readonly gesetzt haben. Dies liegt daran, dass Sie einen böswilligen Benutzer nicht daran hindern können, Werte mit dem Attribut "readonly" zu veröffentlichen.

Ich schlage vor, den ursprünglichen Wert (Serverseite) zu speichern und ihn auf deaktiviert zu setzen. Wenn Sie das Formular absenden, ignorieren Sie alle gebuchten Werte und übernehmen Sie die ursprünglichen Werte, die Sie gespeichert haben.

Es sieht aus und verhält sich wie ein readonly Wert. Und es behandelt (ignoriert) Beiträge von böswilligen Benutzern. Du tötest 2 Vögel mit einer Klappe.


In altem HTML können Sie verwenden

<input type="checkbox" disabled checked>text

aber eigentlich ist nicht zu empfehlen, einfach nur altes HTML zu verwenden, jetzt sollte man XHTML verwenden.

In gut gebildetem XHTML müssen Sie verwenden

<input type="checkbox" disabled="disabled" checked="checked" />text <!-- if yu have a checked box-->
<input type="checkbox" disabled="disabled" />text <!-- if you have a unchecked box -->

gut geformtes XHTML benötigt ein XML-Formular, das ist der Grund für die Verwendung von disabled = "disabled" anstatt einfach disabled zu verwenden.


Neueste Jquery hat diese Funktion

$ ("# txtname"). prop ('readonly', false);


Sehr spät auf die Party, aber ich fand eine Antwort für MVC (5) Ich habe die CheckBox deaktiviert und ein HiddenFor BEFORE the checkbox hinzugefügt, so wenn es veröffentlicht, wenn das Hidden-Feld zuerst findet und diesen Wert verwendet. Das funktioniert.

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>

Wenn Sie das Kontrollkästchen benötigen, um mit dem Formular gesendet werden, aber effektiv nur für den Benutzer schreibgeschützt, empfehle ich, sie auf deaktiviert zu setzen und JavaScript zu verwenden, um sie wieder zu aktivieren, wenn das Formular abgeschickt wird.

Dies ist aus zwei Gründen. Zunächst und am wichtigsten ist es, dass Ihre Benutzer einen sichtbaren Unterschied zwischen den Kontrollkästchen, die sie ändern können, und den Kontrollkästchen, die schreibgeschützt sind, sehen können. Deaktiviert tut dies.

Der zweite Grund ist, dass der deaktivierte Status in den Browser integriert ist, so dass Sie weniger Code zum Ausführen benötigen, wenn der Benutzer auf etwas klickt. Dies ist wahrscheinlich eher eine persönliche Vorliebe als alles andere. Sie benötigen noch einige Javascript, um diese beim Senden des Formulars zu deaktivieren.

Es scheint mir einfacher zu sein, Javascript zu verwenden, wenn das Formular abgeschickt wird, um die Kontrollkästchen zu deaktivieren, anstatt eine versteckte Eingabe zu verwenden, um den Wert zu tragen.


Wenn ein HTML-Kontrollkästchen an den Server gesendet wird, hat es einen String-Wert von 'on' oder ''.

Readonly hält den Benutzer nicht an, das Kontrollkästchen zu bearbeiten, und deaktiviert, dass der Wert zurückgesendet wird.
Eine Möglichkeit ist, ein verstecktes Element zu haben, um den tatsächlichen Wert zu speichern, und das angezeigte Kontrollkästchen ist ein Dummy, der deaktiviert ist. Auf diese Weise bleibt der Status der Checkbox zwischen den Posts erhalten.

Hier ist eine Funktion, dies zu tun. Es verwendet eine Zeichenfolge von "T" oder "F" und Sie können dies beliebig ändern. Dies wurde in einer ASP-Seite mit serverseitigem VB-Skript verwendet.

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)

    dim strThisCheckedValue

    if (i_strChecked_TorF = "T") then
        strThisCheckedValue = " checked "
        i_strChecked_TorF = "on"
    else
        strThisCheckedValue = ""
        i_strChecked_TorF = ""
    end if

    MakeDummyReadonlyCheckbox = "<input type='hidden' id='" & i_strName & "' name='" & i_strName & "' " & _
        "value='" & i_strChecked_TorF & "'>" & _
    "<input type='checkbox' disabled id='" & i_strName & "Dummy' name='" & i_strName & "Dummy' " & _
        strThisCheckedValue & ">"   
end function

public function GetCheckbox(i_objCheckbox)

    select case trim(i_objCheckbox)

        case ""
            GetCheckbox = "F"

        case else
            GetCheckbox = "T"

    end select

end function

An der Spitze einer ASP-Seite können Sie den dauerhaften Wert abholen ...

strDataValue = GetCheckbox(Request.Form("chkTest"))

und wenn Sie Ihre Checkbox ausgeben möchten, können Sie dies tun ...

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

Ich habe das getestet und es funktioniert gut. Es ist auch nicht auf JavaScript angewiesen.


eine andere "einfache Lösung":

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

deaktiviert = "deaktiviert" / deaktiviert = wahr


onclick = "javascript: return false;"


READONLY funktioniert nicht mit Checkboxen, da es Sie daran hindert, den Wert eines Feldes zu bearbeiten, aber mit einer Checkbox bearbeiten Sie den Status des Feldes (on || off)

Von faqs.org :

Es ist wichtig zu verstehen, dass READONLY lediglich verhindert, dass der Benutzer den Wert des Feldes ändert und nicht mit dem Feld interagiert. In Kontrollkästchen können Sie sie beispielsweise aktivieren oder deaktivieren (wodurch der Status CHECKED gesetzt wird), aber Sie ändern den Wert des Feldes nicht.

Wenn Sie den Wert nicht disabled möchten, den Wert jedoch trotzdem übermitteln möchten, wie wäre es, wenn der Wert als verborgenes Feld übergeben und der Inhalt nur dann gedruckt wird, wenn der Benutzer die Bearbeitungskriterien nicht erfüllt? z.B

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

<input type="checkbox" onclick="this.checked=!this.checked;">

Aber Sie müssen unbedingt die Daten auf dem Server validieren, um sicherzustellen, dass sie nicht geändert wurden.


<input type="checkbox" readonly="readonly" name="..." />

mit jquery:

$(':checkbox[readonly]').click(function(){
            return false;
        });

Es kann dennoch sinnvoll sein, einen visuellen Hinweis (CSS, Text, ...) zu geben, dass das Steuerelement keine Eingaben akzeptiert.





checkbox