Können HTML-Kontrollkästchen auf schreibgeschützt gesetzt werden?

Ich dachte, sie könnten es sein, aber da ich mein Geld nicht dort hinlege, wo mein Mund war (sozusagen), scheint das Setzen des schreibgeschützten Attributs eigentlich nichts zu bewirken.

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

Sie können dies verwenden:

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

Dies funktioniert, weil die Rückgabe von false vom Klickereignis die Fortsetzung der Ausführungskette stoppt.

READONLYFunktioniert nicht mit Kontrollkästchen, da Sie den Wert eines Felds nicht bearbeiten können. Mit einem Kontrollkästchen bearbeiten Sie jedoch tatsächlich den Status des Felds (ein || aus).

Von faqs.org :

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

Wenn Sie disabledden Wert nicht verwenden möchten, ihn aber dennoch senden möchten, können Sie den Wert als ausgeblendetes Feld senden und den Inhalt nur an den Benutzer drucken, wenn dieser 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';
}

Dies ist ein Kontrollkästchen, das Sie nicht ändern können:

<input type="checkbox" disabled="disabled" checked="checked">

Einfach disabled="disabled"als Attribut hinzufügen .

Bearbeiten, um die Kommentare zu adressieren:

Wenn Sie möchten, dass die Daten zurückgesendet werden, besteht eine einfache Lösung darin, denselben Namen auf eine versteckte Eingabe anzuwenden:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

Auf diese Weise dient das Kontrollkästchen, wenn es auf "deaktiviert" gesetzt ist, nur dem Zweck einer visuellen Darstellung der Daten, anstatt tatsächlich mit den Daten "verknüpft" zu werden. Im Postback wird der Wert der versteckten Eingabe gesendet, wenn das Kontrollkästchen deaktiviert ist.

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

Sie MÜSSEN jedoch unbedingt die Daten auf dem Server validieren, um sicherzustellen, dass sie nicht geändert wurden.

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

disabled = "disabled" / disabled = true

Dies ist ein kleines Usability-Problem.

Wenn Sie ein Kontrollkästchen anzeigen möchten, es aber nicht interagieren lassen möchten, warum dann überhaupt ein Kontrollkästchen?

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

dh so etwas:

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

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

mit jquery:

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

Es könnte dennoch eine gute Idee sein, einen visuellen Hinweis (CSS, Text, ...) zu geben, dass das Steuerelement keine Eingaben akzeptiert.

Ich habe dies verwendet, um die Ergebnisse zu erzielen:

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

Ich habe zufällig die unten angegebene Lösung bemerkt. In fand es meine Recherche für das gleiche Thema. Ich weiß nicht, wer es gepostet hat, aber es wurde nicht von mir gemacht. Es verwendet jQuery:

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

Dadurch würden die Kontrollkästchen schreibgeschützt, was hilfreich wäre, um dem Client schreibgeschützte Daten anzuzeigen.

onclick="javascript: return false;"

Verspätete Antwort, aber die meisten Antworten scheinen es zu komplizieren.

So wie ich es verstehe, wollte das OP im Grunde:

1. Schreibgeschütztes Kontrollkästchen zum Anzeigen des Status.
2. Mit Formular zurückgegebener Wert.

Es sollte angemerkt werden, dass:

1. Das OP zog es vor, das disabledAttribut nicht zu verwenden , da die aktivierten Kontrollkästchen zusammen mit dem Rest des Formulars gesendet werden sollen.
2. Nicht aktivierte Kontrollkästchen werden nicht mit dem Formular gesendet, da das Zitat aus dem OP in 1. oben angibt, dass sie es bereits wussten. Grundsätzlich existiert der Wert des Kontrollkästchens nur, wenn es aktiviert ist.
3. Ein deaktiviertes Kontrollkästchen zeigt deutlich an, dass es nicht beabsichtigt geändert werden kann, sodass ein Benutzer wahrscheinlich nicht versucht, es zu ändern.
4. Der Wert eines Kontrollkästchens beschränkt sich nicht nur auf die Angabe seines Status, z. B. yesoder false, sondern kann ein beliebiger Text sein.

Da das readonlyAttribut nicht funktioniert, ist die beste Lösung, die kein Javascript erfordert, Folgendes:

1. Ein deaktiviertes Kontrollkästchen ohne Namen oder Wert.
2. Wenn das Kontrollkästchen als aktiviert angezeigt werden soll, wird ein verstecktes Feld mit dem Namen und dem Wert auf dem Server gespeichert.

Also für ein markiertes Kontrollkästchen:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

Für ein deaktiviertes Kontrollkästchen:

<input type="checkbox" disabled="disabled" />

Das Hauptproblem bei deaktivierten Eingaben, insbesondere bei Kontrollkästchen, ist ihr schlechter Kontrast, der für einige mit bestimmten Sehbehinderungen ein Problem sein kann. Es kann besser sein, einen Wert durch einfache Wörter wie Status: noneoder anzugeben Status: implemented, aber die oben verborgene Eingabe einzuschließen, wenn letztere verwendet wird, wie z.

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

Die meisten aktuellen Antworten haben eines oder mehrere der folgenden Probleme:

1. Nur auf Maus und nicht auf Tastatur prüfen.
2. Nur beim Laden der Seite prüfen.
3. Haken Sie die allseits beliebte Änderung ein oder senden Sie Ereignisse, die nicht immer funktionieren, wenn etwas anderes sie verknüpft hat.
4. Benötigen Sie eine versteckte Eingabe oder andere spezielle Elemente / Attribute, die Sie rückgängig machen müssen, um das Kontrollkästchen mithilfe von Javascript wieder zu aktivieren.

Das Folgende ist einfach und hat keines dieser Probleme.

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

Wenn das Kontrollkästchen schreibgeschützt ist, wird es nicht geändert. Wenn nicht, wird es. Es wird jquery verwendet, aber wahrscheinlich verwenden Sie das bereits ...

Es klappt.

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

Wenn Sie möchten, dass sie mit Formular an den Server gesendet werden, aber nicht für den Benutzer interaktiv sind, können Sie sie pointer-events: nonein CSS verwenden ( funktioniert in allen modernen Browsern außer IE10- und Opera 12- ) und den Registerkartenindex festlegen  -1, um Änderungen über die Tastatur zu verhindern. Beachten Sie auch, dass Sie das labelTag nicht verwenden können, da durch Klicken darauf der Status ohnehin geändert wird.

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}

<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>

<input type="checkbox" onclick="return false" /> wird für dich arbeiten, ich benutze dies

Einige der Antworten hier scheinen ein bisschen umständlich zu sein, aber hier ist ein kleiner Hack.

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>​

Dann können Sie in jquery eine von zwei Optionen auswählen:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

.

Demo: http://jsfiddle.net/5WFYt/

Aufbauend auf den obigen Antworten kann dies bei Verwendung von jQuery 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 festzulegen. Das Obige funktioniert für Text und Kontrollkästchen, indem Sie einen übergeordneten Container wie in den folgenden Szenarien als .readonly festlegen:

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

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

Ich weiß, dass "deaktiviert" keine akzeptable Antwort ist, da die Operation möchte, dass sie veröffentlicht wird. Sie müssen jedoch immer Werte auf der Serverseite validieren, AUCH wenn Sie die Option readonly festgelegt haben. Dies liegt daran, dass Sie einen böswilligen Benutzer nicht daran hindern können, Werte mit dem Attribut readonly zu veröffentlichen.

Ich empfehle, den ursprünglichen Wert (serverseitig) zu speichern und auf deaktiviert zu setzen. Ignorieren Sie dann beim Senden des Formulars alle veröffentlichten Werte und übernehmen Sie die von Ihnen gespeicherten Originalwerte.

Es wird so aussehen und sich so verhalten, als wäre es ein schreibgeschützter Wert. Und es behandelt (ignoriert) Beiträge von böswilligen Benutzern. Du tötest 2 Fliegen mit einer Klappe.

Ich hätte die Antwort von ConroyP kommentiert, aber das erfordert 50 Ruf, den ich nicht habe. Ich habe genug Ruf, um eine weitere Antwort zu posten. Es tut uns leid.

Das Problem mit der Antwort von ConroyP ist, dass das Kontrollkästchen unveränderlich wird, indem es nicht einmal in die Seite aufgenommen wird. Obwohl Electrons_Ahoy nicht so viel vorschreibt, wäre die beste Antwort eine, bei der das unveränderliche Kontrollkästchen ähnlich aussieht, 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 beiden Gründe anspricht, aus denen Electrons_Ahoy angibt, dass das Attribut "deaktiviert" nicht verwendet werden soll, wäre nicht unbedingt ungültig, da das Attribut "deaktiviert" verwendet wird.

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 $ check wahr ist. Das Kontrollkästchen wird als deaktiviert angezeigt, wenn $ checked false ist. Der Benutzer kann den Status des Kontrollkästchens genau dann ändern, wenn $ disabled false ist. Der Parameter "my_name" wird nicht veröffentlicht, wenn das Kontrollkästchen vom Benutzer deaktiviert ist oder nicht. Der Parameter "my_name = 1" wird veröffentlicht, wenn das Kontrollkästchen vom Benutzer aktiviert ist oder nicht. Ich glaube, das ist es, wonach Electrons_Ahoy gesucht hat.

Nein, Eingabe-Kontrollkästchen können nicht schreibgeschützt werden.

Aber Sie können sie nur mit Javascript schreibgeschützt machen!

Fügen Sie diesen Code jederzeit und überall hinzu, damit die Kontrollkästchen wie angenommen schreibgeschützt funktionieren, indem verhindert wird, dass der Benutzer ihn in irgendeiner Weise ändert.

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});

input[type=checkbox][readonly] {
    cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

Sie können dieses Skript jederzeit nach dem Laden von jQuery hinzufügen.

Es funktioniert für dynamisch hinzugefügte Elemente.

Es funktioniert, indem es das Klickereignis (das vor dem Änderungsereignis auftritt) für ein Element auf der Seite aufnimmt und dann prüft, ob dieses Element ein schreibgeschütztes Kontrollkästchen ist. Wenn dies der Fall ist, blockiert es die Änderung.

Es gibt so viele Wenns, dass die Leistung der Seite nicht beeinträchtigt wird.

Verwenden Sie einfach ein einfaches deaktiviertes Tag wie das folgende.

<input type="checkbox" name="email"  disabled>

Eine alternative Idee besteht darin, ein Overlay zu verwenden und Ihre schreibgeschützten Eingaben zu vertuschen

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

Wenn Sie möchten, dass ALLE Ihre Kontrollkästchen "gesperrt" sind, damit der Benutzer den Status "aktiviert" nicht ändern kann, wenn "schreibgeschützt" vorhanden ist, können Sie jQuery verwenden:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

Das Coole an diesem Code ist, dass Sie das Attribut "readonly" im gesamten Code ändern können, ohne jedes Kontrollkästchen neu binden zu müssen.

Es funktioniert auch für Optionsfelder.

Der Hauptgrund, warum Benutzer ein schreibgeschütztes Kontrollkästchen und (auch) eine schreibgeschützte Funkgruppe wünschen, besteht darin, dass Informationen, die nicht geändert werden können, dem Benutzer in der eingegebenen Form wiedergegeben werden können.

OK deaktiviert wird dies tun - leider sind deaktivierte Steuerelemente nicht über die Tastatur navigierbar und verstoßen daher gegen alle Gesetze zur Barrierefreiheit. Dies ist der GRÖSSTE Hangup in HTML, den ich kenne.

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

Sehr spät zur Party, aber ich habe eine Antwort für MVC gefunden. (5) Ich habe die CheckBox deaktiviert und ein HiddenFor VOR dem Kontrollkästchen hinzugefügt. Wenn es also veröffentlicht wird, wird zuerst das Feld Hidden gefunden und dieser 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>

Ich würde das schreibgeschützte Attribut verwenden

<input type="checkbox" readonly>

Verwenden Sie dann CSS, um Interaktionen zu deaktivieren:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

Beachten Sie, dass die Verwendung der Pseudoklasse: schreibgeschützt hier nicht funktioniert.

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}

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

READONLY selbst wird nicht funktionieren. Möglicherweise können Sie etwas Funky mit CSS ausführen, aber normalerweise werden sie nur deaktiviert.

WARNUNG: Wenn sie zurückgesandt werden, kann der Kunde sie ändern. Sie können sich nicht auf Readonly verlassen, um zu verhindern, dass ein Benutzer etwas ändert. Die könnten immer Geiger benutzen oder einfach das HTML mit Firebug oder so etwas ändern.

Meine Lösung ist eigentlich das Gegenteil von FlySwats Lösung, aber ich bin mir nicht sicher, ob sie für Ihre Situation funktioniert. Ich habe eine Gruppe von Kontrollkästchen und jedes hat einen onClick-Handler, der das Formular sendet (sie werden zum Ändern der Filtereinstellungen für eine Tabelle verwendet). Ich möchte nicht mehrere Klicks zulassen, da nachfolgende Klicks nach dem ersten ignoriert werden. Daher deaktiviere ich alle Kontrollkästchen nach dem ersten Klick und nach dem Absenden des Formulars:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

Die Kontrollkästchen befinden sich in einem span-Element mit der ID "Filter". Der zweite Teil des Codes ist eine jQuery-Anweisung, die die Kontrollkästchen durchläuft und jedes deaktiviert. Auf diese Weise werden die Kontrollkästchenwerte weiterhin über das Formular gesendet (da das Formular vor dem Deaktivieren gesendet wurde) und der Benutzer kann sie nicht ändern, bis die Seite neu geladen wird.