web-dev-qa-db-de.com

Können HTML-Checkboxen auf Readonly gesetzt werden?

Ich dachte, sie könnten es sein, aber da ich mein Geld nicht dort platziere, wo mein Mund war (sozusagen), dass das Setzen des readonly-Attributs tatsächlich nichts zu tun scheint.

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

732
Electrons_Ahoy

sie können dies verwenden:

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

Dies funktioniert, weil durch die Rückgabe von false vom Ereignis click die Ausführungskette angehalten wird.

470
Yanni

READONLY funktioniert nicht mit Kontrollkästchen, da Sie value eines Felds nicht bearbeiten können. Mit einem Kontrollkästchen bearbeiten Sie jedoch den status des Feldes [] (ein || aus).

Von faqs.org :

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

Wenn Sie disabled nicht verwenden möchten, den Wert aber trotzdem übergeben möchten, wie wäre es, wenn Sie den Wert als ausgeblendetes Feld übermitteln und den Inhalt nur an den Benutzer drucken, wenn er 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';
}
399
ConroyP

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

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

Fügen Sie einfach disabled="disabled" als Attribut hinzu.


Bearbeiten, um die Kommentare anzusprechen:

Wenn Sie möchten, dass die Daten zurückgeschickt werden, ist es eine einfache Lösung, denselben Namen auf eine versteckte Eingabe anzuwenden:

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

Wenn das Kontrollkästchen auf "deaktiviert" gesetzt ist, dient es nur zur visuellen Darstellung der Daten, anstatt tatsächlich mit den Daten "verknüpft" zu sein. Im Post-Back wird der Wert der ausgeblendeten Eingabe gesendet, wenn das Kontrollkästchen deaktiviert ist.

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

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

62
Grant Wagner

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

55
summsel

Dies ist ein bisschen ein Usability-Problem.

Wenn Sie ein Kontrollkästchen anzeigen möchten, aber nicht mit ihm interagieren lassen, warum dann sogar ein Kontrollkästchen? 

Mein Ansatz wäre jedoch die Verwendung von disabled (Der Benutzer erwartet, dass ein deaktiviertes Kontrollkästchen nicht bearbeitet werden kann, anstatt JS zu verwenden, damit ein aktiviertes Kontrollkästchen nicht funktioniert), und fügt einen Formularübergabehandler mit Javascript hinzu, der Kontrollkästchen aktiviert, bevor das Formular aktiviert ist übermittelt. Auf diese Weise erhalten Sie Ihre Werte veröffentlicht.

zB 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;
       }
    }
}
44
FlySwat
<input type="checkbox" readonly="readonly" name="..." />

mit jquery:

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

es kann dennoch sinnvoll sein, einen visuellen Hinweis (css, text, ...) anzugeben, dass das Steuerelement keine Eingaben akzeptiert.

36
Jan

Ich habe dies genutzt, um die Ergebnisse zu erzielen:

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

Ich habe zufällig die unten angegebene Lösung bemerkt. In fand es meine Recherche zum gleichen Thema. Ich weiß nicht, wer es geschrieben 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.

12
onclick="javascript: return false;"
8
Sandman
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
6
pollodiablo

Einige der Antworten hier scheinen ein wenig umkreist 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 wä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();
    });

});

Das

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

5
sksallaj

<input type="checkbox" onclick="return false" /> wird für Sie arbeiten, ich verwende das 

5
Rinto George

Aufbauend auf den obigen Antworten kann dies bei der 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 für jeden übergeordneten Container als .readonly festgelegt wird, wie in den 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>
4
Derrick
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
4
frag

Ich hätte die Antwort von ConroyP kommentiert, aber das erfordert einen guten 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, wenn es nicht auf der Seite enthalten ist. Obwohl Electrons_Ahoy nicht so viel vorschreibt, wäre die beste Antwort eine, bei der das Kontrollkästchen "Unveränderlich" ähnlich aussehen würde, wenn es sich nicht um das Kontrollkästchen "Change" handelt, wie es bei der Anwendung des Attributs "disabled" der Fall ist. Eine Lösung, die die zwei Gründe angeht, die Electrons_Ahoy angibt, das Attribut "disabled" nicht verwenden zu wollen, wäre not notwendigerweise ungültig, da es das Attribut "disabled" verwendet.

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

3

Ich weiß, dass "Behinderte" keine akzeptable Antwort ist, da der Op es postet. Sie müssen jedoch immer Werte auf der Serverseite EVEN überprüfen, wenn Sie die Readonly-Option festgelegt haben. Dies liegt daran, dass Sie einen böswilligen Benutzer nicht daran hindern können, Werte mithilfe des Attributs readonly zu veröffentlichen.

Ich empfehle, den ursprünglichen Wert (serverseitig) zu speichern und auf "deaktiviert" zu setzen. Ignorieren Sie beim Senden des Formulars alle veröffentlichten Werte und übernehmen Sie die ursprünglichen Werte, die Sie gespeichert haben. 

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

3
NL3294

Verwenden Sie einfach das folgende deaktivierte Tag.

<input type="checkbox" name="email"  disabled>
2
Nirbhay Rana

Wenn Sie möchten, dass sie mit Formularen an den Server gesendet werden, aber für den Benutzer nicht interaktiv sind, können Sie pointer-events: none in css verwenden ( funktioniert in allen modernen Browsern außer IE10- und Opera 12- ) und tab-index auf -1 setzen. Um das Ändern über die Tastatur zu verhindern. Beachten Sie auch, dass Sie das Tag label nicht verwenden können, da durch Klicken darauf der Status 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>
2
Qwertiy

Wenn ALLE Ihre Ankreuzfelder "gesperrt" sein sollen, damit der Benutzer den Status "geprüft" nicht ändern kann, wenn "readonly" vorhanden ist, können Sie jQuery verwenden:

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

Das Tolle an diesem Code ist, dass Sie das "readonly" -Attribut im gesamten Code ändern können, ohne jedes Kontrollkästchen erneut zu binden.

Es funktioniert auch für Radioknöpfe.

2
Daniel Ribeiro

alternativ können Sie eine Überlagerung verwenden und Ihre readonly - Eingänge vertuschen

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

2
dodozhang21

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

Soweit ich weiß, wollte das OP im Grunde:

  1. Schreibgeschütztes Kontrollkästchen, um den Status anzuzeigen.
  2. Wert, der mit dem Formular zurückgegeben wird.

Es ist darauf hinzuweisen, dass:

  1. Das OP hat es vorgezogen, das Attribut disabled nicht zu verwenden, da die aktivierten Kontrollkästchen zusammen mit dem Rest des Formulars gesendet werden sollen.
  2. Deaktivierte Kontrollkästchen werden nicht mit dem Formular gesendet, da das Zitat aus dem OP in 1. oben angibt, dass sie es bereits gewusst haben. Grundsätzlich ist der Wert des Kontrollkästchens nur vorhanden, wenn es markiert ist.
  3. Ein deaktiviertes Kontrollkästchen weist eindeutig darauf hin, dass es konstruktionsbedingt nicht geändert werden kann, sodass es unwahrscheinlich ist, dass ein Benutzer versucht, es zu ändern.
  4. Der Wert eines Kontrollkästchens ist nicht auf die Angabe seines Status beschränkt, z. B. yes oder false, sondern kann ein beliebiger Text sein.

Da das Attribut readonly nicht funktioniert, ist die beste Lösung, die kein Javascript erfordert,:

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

Also für ein Häkchen:

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

Für ein nicht angehaktes Kontrollkästchen:

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

Das Hauptproblem bei deaktivierten Eingaben, insbesondere bei Kontrollkästchen, ist der schlechte Kontrast, der für einige Benutzer mit bestimmten Sehbehinderungen problematisch sein kann. Es kann besser sein, einen Wert durch einfache Wörter wie Status: none oder Status: implemented anzugeben, aber die versteckte Eingabe darüber einzuschließen, wenn letzteres verwendet wird, wie zum Beispiel:

<input type="hidden" name="status" value="implemented" />
1
Patanjali

Nein, Eingabe-Checkboxen können nicht gelesen werden.

Aber Sie können sie mit Javascript lesen!

Fügen Sie diesen Code jederzeit und an beliebiger Stelle hinzu, damit die Kontrollkästchen wie angenommen funktionieren, indem Sie verhindern, dass der Benutzer den Code auf irgendeine 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 wird für dynamisch hinzugefügte Elemente funktionieren.

Es greift das click -Ereignis (das vor dem change -Ereignis auftritt) für ein Element auf der Seite auf, prüft dann, ob es sich bei diesem Element um ein schreibgeschütztes Kontrollkästchen handelt. Wenn dies der Fall ist, wird die Änderung blockiert.

Es gibt so viele ifs, die die Leistung der Seite nicht beeinträchtigen.

1
Timo Huovinen

Beitrag sehr sehr spät ... aber trotzdem. Deaktivieren Sie beim Laden der Seite mit jquery alle Kontrollkästchen außer dem aktuell ausgewählten. Legen Sie dann den aktuell ausgewählten Wert als schreibgeschützt fest, damit er wie der deaktivierte aussieht. Der Benutzer kann den Wert nicht ändern und der ausgewählte Wert wird weiterhin übermittelt.

1
Jason

Der Hauptgrund, warum Leute ein Nur-Lese-Kontrollkästchen und (auch) eine Nur-Lese-Funkgruppe möchten, besteht darin, dass Informationen, die nicht geändert werden können, dem Benutzer in der Form wiedergegeben werden können, in der sie eingegeben wurden. 

OK deaktiviert tut dies - leider sind deaktivierte Steuerelemente nicht über die Tastatur navigierbar und verstoßen daher gegen alle gesetzlichen Bestimmungen zur Barrierefreiheit. Dies ist das größte Problem in HTML, das ich kenne.

1
Tim

Wenn Sie ein HTML-Kontrollkästchen an den Server senden, hat es den Zeichenfolgenwert 'on' oder ''. 

Readonly hält den Benutzer nicht an, das Kontrollkästchen zu bearbeiten, und deaktiviert, wenn der Wert zurückgegeben wird.
Eine Möglichkeit besteht darin, ein verstecktes Element zum Speichern des tatsächlichen Werts zu haben, und das angezeigte Kontrollkästchen ist ein Dummy, der deaktiviert ist. Auf diese Weise bleibt der Status des Kontrollkästchens zwischen den Beiträgen erhalten. 

Hier ist eine Funktion, um dies zu tun. Es verwendet eine Zeichenfolge von 'T' oder 'F' und Sie können dies beliebig ändern. Dies wurde auf 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

Am oberen Rand einer ASP - Seite können Sie den persistenten Wert abrufen ...

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.

0
Dave Barkshire

Sehr spät zur Party, aber ich habe eine Antwort für MVC (5) gefunden Ich habe die CheckBox deaktiviert und vor dem Kontrollkästchen ein HiddenFor hinzugefügt. Das funktioniert doch.

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

Ich würde das Readonly-Attribut verwenden

<input type="checkbox" readonly>

Dann deaktiviere Interaktionen mit CSS:

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

Wenn das Kontrollkästchen mit dem Formular gesendet werden muss, der Benutzer jedoch nur Lesezugriff hat, empfehle ich, die Option deaktiviert zu setzen und Javascript zu verwenden, um sie beim Senden des Formulars wieder zu aktivieren.

Dies hat zwei Gründe. Zunächst und vor allem profitieren Ihre Benutzer davon, dass sie einen sichtbaren Unterschied zwischen den Kontrollkästchen, die sie ändern können, und den Kontrollkästchen, die schreibgeschützt sind, sehen. Deaktiviert macht dies.

Der zweite Grund ist, dass der deaktivierte Status im Browser integriert ist, sodass Sie weniger Code ausführen müssen, wenn der Benutzer etwas anklickt. Dies ist wahrscheinlich eher eine persönliche Präferenz als alles andere. Sie benötigen immer noch Javascript, um diese zu deaktivieren, wenn Sie das Formular absenden.

Es scheint mir einfacher zu sein, etwas Javascript zu verwenden, wenn das Formular gesendet wird, um die Kontrollkästchen zu deaktivieren, als eine verborgene Eingabe zu verwenden, um den Wert zu übernehmen.

0
Mnebuerquo

Meine Lösung ist eigentlich das Gegenteil von FlySwats Lösung, aber ich bin mir nicht sicher, ob sie in Ihrer Situation funktionieren wird. 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. Also 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 "filters". Der zweite Teil des Codes ist eine jQuery-Anweisung, die die Kontrollkästchen durchläuft und alle 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 erneut geladen wird.

0
sk.

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

READONLY funktioniert nicht. Möglicherweise können Sie mit CSS etwas unkonventionelles machen, aber normalerweise machen wir sie nur 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. Die könnten immer Fiddler verwenden oder einfach nur die HTML mit Firebug oder so etwas chane.

0
Walden Leverich

Beim Absenden des Formulars übergeben wir tatsächlich den Wert des Kontrollkästchens, nicht den Status (aktiviert/deaktiviert). Das Readonly-Attribut verhindert, dass wir den Wert bearbeiten, nicht aber den Status. Wenn Sie ein schreibgeschütztes Feld haben möchten, das den Wert darstellt, den Sie übergeben möchten, verwenden Sie readonly-Text.

0
dpp

Wenn jemand anderes MVC und eine Editorvorlage verwendet, kontrolliere ich die Anzeige einer schreibgeschützten Eigenschaft (ich verwende ein benutzerdefiniertes Attribut, um den Wert in der if-Anweisung abzurufen).

@if (true)
{
    @Html.HiddenFor(m => m)
    @(ViewData.Model ? Html.Raw("Yes") : Html.Raw("No"))
} 
else
{               
    @Html.CheckBoxFor(m => m)
}
0
Richard Maxwell
<input name="testName" type="checkbox" disabled>
0
Md. Rahman