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

818

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.

Electrons_Ahoy
quelle
39
Ein (böswilliger) Client kann jederzeit den Wert eines Kontrollkästchens ändern (oder beliebige Anforderungen senden). Stellen Sie immer sicher, dass Sie eine ordnungsgemäße serverseitige Validierung durchführen!
Knittl
4
@knittl Aber ein normaler Besucher hat keinen (böswilligen) Client. Und ein normaler Vistor wollte keine Information ändern (das ist der Sinn von readonly)
Christian Gollhardt
3
@knittl Du scheinst den ganzen Sinn von readonly! Warum dann würde dieses Attribut existieren!
Izhar Aazmi
10
@IzharAazmi: readonlyist nur ein clientseitiges Attribut, mit dem ein Browser eine Site ordnungsgemäß rendern und dann die richtige Anforderung daraus erstellen kann. Der Server kann und sollte das readonlyAttribut der gerenderten Seite nicht kennen . Es muss davon ausgegangen werden, dass die Anfrage von irgendwoher kam (und möglicherweise mit böswilligen Absichten). Verlassen Sie sich niemals auf vom Benutzer bereitgestellte Eingaben. Warum sollten Sie dennoch den Wert eines Kontrollkästchens senden, den Sie in einer Anforderung nicht bearbeiten können (wenn Sie den Wert vor dem Rendern festlegen, kennen Sie den Wert bereits, wenn die Anforderung gesendet wird, sodass Sie ihn nicht in der Anforderung übertragen müssen)
knittl
4
@knittl Ich stimme zu! Aber Sie sehen readonly, dass dort aus irgendeinem Grund ein Attribut vorhanden ist. Es hat sicherlich nichts mit der serverseitigen Implementierung zu tun. Aber es ist da, um dem Benutzer zu sagen "Hey! Dieser Wert wird hier angenommen, und / aber Sie können dies nicht ändern."
Izhar Aazmi

Antworten:

538

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.

Yanni
quelle
29
Die Rückgabe von false in Javascript verhindert, dass die Ausführungskette für den Klick- oder Key-Handler fortgesetzt wird. Hat nichts mit dem Status des Kontrollkästchens zu tun
Jessica Brown
9
PS ... wenn Sie möchten, dass das Kontrollkästchen aktiviert ist, müssen Sie es hinzufügen checked="checked"und nicht mit dem Javascript herumspielen. Das Javascript dient nur dazu, Mausklicks auf das Eingabeobjekt zu ignorieren und nicht den Status des Kontrollkästchens festzulegen.
Jessica Brown
8
In diesem Fall keine visuelle Anzeige des R / O-Status.
Jesse Glick
11
Verhindert jedoch die Verwendung von TAB, um zur nächsten Eingabe zu navigieren.
user327961
7
Schlägt vollständig fehl, wenn Javascript deaktiviert ist!
Doin
420

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';
}
ConroyP
quelle
135
Funktioniert, aber es ist irgendwie ... gut dreckig, schreibgeschützt auf Kontrollkästchen sollte einfach das tun, was die Intuition sagt.
Levhita
8
Die Intuition täuscht uns, wie ConroyP erklärte.
Aneves
120
Die Intuition täuscht uns nicht, sie täuscht diejenigen, die das Kontrollkästchen auf diese Weise implementiert haben.
Califf
@ConroyP -> "Es verhindert, dass Sie den Wert eines Felds bearbeiten, aber mit einem Kontrollkästchen bearbeiten Sie tatsächlich den Status des Feldes (ein || aus)". Das ist eine wirklich schwache Rechtfertigung für eine Entscheidung ohne Kopf. Der 'Zustand' und der 'Wert' sind für die meisten von uns ähnlich wie 'toMAYto' und 'toMAHto', wie Sie an den positiven Stimmen der Menschen sehen können, die nicht einverstanden sind.
McAuley
343

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.

Silvermind
quelle
331
Beachten Sie, dass das Kontrollkästchen "Deaktiviert" keinen Wert über POST-Daten sendet.
Biphobe
66
@powtac Sie können nicht ansprechen, dass er die Daten veröffentlichen möchte. Ihr Beispiel tut dies nicht.
David Mårtensson
70
Diese Antwort sollte auf keinen Fall 105 positive Stimmen haben. Es geht gegen alles, was das OP sagt.
JM4
15
@ Nathanhayfield: Nach dieser Logik sollte ich in der Lage sein, hilfreiche Antworten zu jedem Thema zu veröffentlichen und positive Stimmen zu erhalten. :(
Michael Bray
24
@MichaelBray Ich vermute, dass dies viele positive Stimmen bekommt, weil viele Leute wissen wollen, wie man Kontrollkästchen schreibgeschützt macht, also tun sie dies: 1) Google "Kontrollkästchen schreibgeschützt". 2) Stellen Sie sicher, dass der Titel dieser Frage mit dem übereinstimmt, was sie tun möchten, und klicken Sie darauf. 3) Scrollen Sie nach unten, bis sie diese Antwort finden. 4) Glück und Gegenstimme.
Mark Byers
63
<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.

Grant Wagner
quelle
4
Ich fand das die beste Lösung; Außerdem kann ich einen anderen Code aufrufen (z. B. ein paar Abfragen), um ein nettes kleines Schild mit der Aufschrift "Sie können dies erst ändern, wenn Sie x zum ersten Mal ausführen" anzuzeigen. Also so etwas wie: "... onclick = 'this.checked =! This.checked; Javascript: theCheckboxWasClicked ();' ..."
Bane
Dies macht die Kästchen nicht grau wie bei der Antwort von powtac, also bekam es meine Stimme
EHarpham
Dies ist ein wenig hackisch, aber es ist ein genialer, perfekter, fast eleganter kleiner Hack.
Russell
Beste Lösung. Sollte als die richtige Antwort markiert werden.
Scottie
3
Wie oben erwähnt, funktioniert dies beim Doppelklicken im IE nicht. Ich habe verwendet: onchange = "this.checked = true;"
Ritikesh
57

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

summsel
quelle
1
Dies löst alle Probleme: Erstellt ein schreibgeschütztes Kontrollkästchen, sendet POST-Daten und bietet eine visuelle Anzeige der Nur-Lese-Fähigkeit (im Gegensatz zu allen Javascript-Lösungen)
Dalibor Frivaldsky
2
Sie können Drop - off auch nameund valueAttribute aus dem Dummy-Box, auch ="checked"und ="diabled"attrib-Werte abgesetzt werden können. w3.org/TR/html-markup/input.checkbox.html
Sampo Sarrala - codidact.org
Am wichtigsten ist, dass diese Lösung einfaches altes HTML ist und nicht auf Javascript basiert.
GlennG
45

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;
       }
    }
}
FlySwat
quelle
22
Eine andere Möglichkeit besteht darin, das deaktivierte Kontrollkästchen (oder ein Bild oder etwas anderes, das aktiviert / deaktiviert ist) anzuzeigen und eine versteckte Eingabe zu haben, die vom Server verarbeitet wird.
Juan Mendes
5
Es ist kein Usability-Problem, wenn Sie ein Formular erhalten haben, in dem sich ein Teil Ihrer Entscheidung auf andere Eingaben auswirkt (auch bekannt als: Festlegen eines Werts, der nicht berührt werden kann, wenn Sie Ihre erste Aktion nicht rückgängig machen). Ich hasse es, wenn Leute versuchen, ihre Meinung zu ändern, anstatt zu antworten (hier geht es nicht um dich @FlySwat, du hast geantwortet).
Pherrymason
7
Der Zweck besteht darin, ein Kontrollkästchen als Anzeigefeld "Dieser Wert ist wahr" zu verwenden, mit dem eine Tabelle leichter gescannt werden kann als mit einer Reihe von "wahr" / "falsch" -s. Sicher, Sie könnten ein Symbol verwenden, aber in einem Formular scheinen Kontrollkästchen vorhanden zu sein, die für die Verwendung reif sind.
Olie
1
Ich verwende diese Lösung im Allgemeinen, aber manchmal sehen Benutzer, insbesondere bei langsamer Verbindung, die nach dem Absenden des Formulars aktivierten Eingabeschaltflächen und entscheiden sich, damit zu spielen.
Systempuntoout
2
Angenommen, Sie haben eine Reihe von "Features", die enthalten sein können oder nicht. Sie haben also eine Vorlage, in der ein Kontrollkästchen für das Feature angezeigt wird. Aber manchmal ist eine Funktion eine Voraussetzung für etwas anderes ... also MUSS sie enthalten sein, aber Sie möchten Ihre Vorlage nicht ändern. Genau dafür ist ein deaktiviertes / aktiviertes Kontrollkästchen gedacht. Sie sind schon immer da, also hoffe ich, dass die Frage "Warum überhaupt ein Kontrollkästchen?" Rhetorisch war.
Triynko
38
<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.

Jan.
quelle
Dies hat in ie6 bei mir nicht funktioniert, der schreibgeschützte Attributfilter funktioniert nicht richtig. Ich habe das aus dem Filter genommen und die Attributprüfung in den Hauptteil der Funktion eingefügt, und es funktioniert gut in ie6.
GT124
3
Ich habe "data-readonly = true" anstelle des Standardattributs verwendet und es funktioniert in allen Browsern einwandfrei. Ich mag diese Lösung mehr als die anderen über +1
peipst9lker
1
Die $(':checkbox[readonly]')Auswahl sollte darin bestehen, alle Kontrollkästchen für Kandidaten zu aktivieren, da der readonlyAttributwert optional ist.
Izhar Aazmi
21

Ich habe dies verwendet, um die Ergebnisse zu erzielen:

<input type=checkbox onclick="return false;" onkeydown="return false;" />
Osama Javed
quelle
In meinem Fall funktioniert dies ohne Semikolon, sonst nicht.
Mwiza
12

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.

Gotham's Reckoning
quelle
1
In der Frage wird nach einem schreibgeschützten Kontrollkästchen und nicht nach einem deaktivierten Kontrollkästchen gefragt. Das ist also die richtigste Antwort.
NileshChauhan
9
onclick="javascript: return false;"
Sandman
quelle
Hmmm ... das funktioniert für den falschen / ungeprüften Fall, aber onclick="javascript: return true;"es verhält sich einfach wie ein normales Kontrollkästchen. Tipps? Vielen Dank!
Olie
@Olie, füge ein checkedAttribut hinzu und bleibe falsean Ort und Stelle.
Qwertiy
7

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>

Patanjali
quelle
7

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.

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

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>

Qwertiy
quelle
Lassen Sie mich Ihren letzten Satz wiederholen (ich habe ihn verpasst und wertvolle Zeit verschwendet): Ihre Technik ist nutzlos, wenn es <label> gibt (in Firefox funktioniert sie tatsächlich perfekt. Das Problem liegt bei Chrome).
Niccolo M.
@NiccoloM., Aber wenn Sie wissen, dass es schreibgeschützt ist, warum es in Etikett einwickeln? Sie können auch ein Label danach setzen und das forAttribut verwenden. In diesem Fall können Sie verwenden input[type="checkbox"][readonly] + label { pointer-events: none !important; }.
Qwertiy
@ KevinBui, hast du entfernt labelund hinzugefügt tabindex? Wie setzen Sie den Fokus auf ein nicht fokussierbares Element, um ein Leerzeichen darauf zu drücken?
Qwertiy
5

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

Rinto George
quelle
5

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/

sksallaj
quelle
3
Und das ist nicht "Kreisverkehr"?
KoZm0kNoT
Nein, es ist ziemlich direkt. Es ist einfach nicht prägnant.
Sksallaj
4

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>
Derrick
quelle
4
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
frag
quelle
4

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.

NL3294
quelle
3

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.

David N. Jafferian
quelle
3

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.

Timo Huovinen
quelle
3

Verwenden Sie einfach ein einfaches deaktiviertes Tag wie das folgende.

<input type="checkbox" name="email"  disabled>
Nirbhay Rana
quelle
6
"Disabled Tag" sendet diese Daten nicht
Przemysław Kaczmarczyk
2

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.

Daniel Ribeiro
quelle
1

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.

Tim
quelle
1

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.

Jason
quelle
1

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>
Bowlturner
quelle
1

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;
}
gordie
quelle
0

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.

Walden Leverich
quelle
Sie haben völlig Recht, deshalb überprüfe ich das auch auf der Serverseite. Die Einstellung dient nur dazu, die Benutzererfahrung auf der Clientseite zu verbessern.
Levhita
0

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.

sk.
quelle