wie POST/Senden Sie ein deaktiviertes Eingabe-Kontrollkästchen?

UPDATE: READONLY funktioniert nicht mit Kontrollkästchen

Sie könnten disabled="disabled" verwenden, aber an diesem Punkt erscheint der Wert des Kontrollkästchens nicht in POST-Werten. Eine der Strategien besteht darin, ein ausgeblendetes Feld mit dem Wert des Kontrollkästchens im selben Formular hinzuzufügen und den Wert aus diesem Feld zurückzulesen

Ändern Sie einfach disabled in readonly.

Ich habe das Problem gelöst.

Da das readonly="readonly" -Tag nicht funktioniert (ich habe es mit verschiedenen Browsern versucht), müssen Sie stattdessen disabled="disabled" Verwenden. Der Wert Ihres Kontrollkästchens wird dann nicht veröffentlicht.

Hier ist meine Lösung:

Um "readonly" look und POST Checkbox-Wert in derselben Zeit zu erhalten, fügen Sie einfach eine versteckte "Eingabe" hinzu, die denselben Namen und Wert wie Ihre Checkbox hat. Sie müssen es neben Ihrem Kontrollkästchen oder zwischen denselben <form></form>-Tags aufbewahren:

<input type="checkbox" checked="checked" disabled="disabled" name="Tests" value="4">SOME TEXT</input>

<input type="hidden" id="Tests" name="Tests" value="4" />

Nur, um Sie wissen zu lassen, dass readonly="readonly", readonly="true", readonly="", oder READONLY dies NICHT lösen wird! Ich habe ein paar Stunden damit verbracht, es herauszufinden!

Diese Referenz ist auch NICHT relevant (möglicherweise noch nicht oder nicht mehr, ich habe keine Ahnung): http://www.w3schools.com/tags/att_input_readonly.asp

Wenn Sie mit JQuery zufrieden sind, entfernen Sie das deaktivierte Attribut, wenn Sie das Formular absenden:

$("form").submit(function() {
    $("input").removeAttr("disabled");
});

Sie könnten es so behandeln ... Erstellen Sie für jedes Kontrollkästchen ein ausgeblendetes Feld mit demselben name-Attribut. Legen Sie jedoch den Wert dieses ausgeblendeten Felds mit einem Standardwert fest, mit dem Sie testen können. Zum Beispiel..

<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />

Wenn das Kontrollkästchen beim Senden des Formulars aktiviert ist, wird der Wert dieses Formularparameters verwendet

"agree,false"

Wenn das Kontrollkästchen nicht markiert ist, lautet der Wert 

"false"

Sie können jeden Wert anstelle von "false" verwenden, aber Sie bekommen die Idee.

Der einfachste Weg dazu ist:

<input type="checkbox" class="special" onclick="event.preventDefault();" checked />

Dadurch wird verhindert, dass der Benutzer dieses Kontrollkästchen deaktivieren kann, und der Wert wird trotzdem übermittelt, wenn das Formular gesendet wird. Entfernen markiert, wenn der Benutzer dieses Kontrollkästchen nicht auswählen kann.

Sie können dann auch Javascript verwenden, um den Onclick zu löschen, sobald eine bestimmte Bedingung erfüllt ist (wenn Sie das wollen). Hier ist eine dumme Geige, die zeigt, was ich meine. Es ist nicht perfekt, aber Sie bekommen den Gist.

http://jsfiddle.net/vwUUc/

<input type="checkbox" checked="checked" onclick="this.checked=true" />

Ich begann mit dem Problem: "Wie kann ich ein deaktiviertes Eingabe-Kontrollkästchen POST/Übermitteln?" und in meiner Antwort habe ich den Kommentar übersprungen: "Wenn wir ein Kontrollkästchen deaktivieren möchten, müssen wir unbedingt einen vorangestellten Wert beibehalten (aktiviert oder deaktiviert), und wir möchten, dass der Benutzer sich dessen bewusst ist (ansonsten sollten wir einen versteckten Typ und verwenden keine Checkbox) ". In meiner Antwort nahm ich an, dass wir immer ein Kontrollkästchen aktiviert lassen wollen und dass der Code auf diese Weise funktioniert. Wenn wir auf diese Checkbox klicken, wird sie für immer überprüft und der Wert wird geposted/gesendet! Auf dieselbe Weise, wenn ich .__ schreibe. onclick = "this.checked = false" ohne checked = "checked" (Hinweis: Standardeinstellung ist nicht markiert), es wird für immer deaktiviert und der Wert wird nicht POSTED/Submitted !.

Das funktioniert wie ein Zauber:

1. Entferne die "deaktivierten" Attribute
2. Senden Sie das Formular
3. Fügen Sie die Attribute erneut hinzu. Am besten verwenden Sie dazu die Funktion setTimeOut , z. mit einer Verzögerung von 1 Millisekunde. 

Der einzige Nachteil ist das kurze Aufblinken der deaktivierten Eingabefelder beim Senden. Zumindest in meinem Szenario ist das kein Problem!

$('form').bind('submit', function () {
  var $inputs = $(this).find(':input'),
      disabledInputs = [],
      $curInput;

  // remove attributes
  for (var i = 0; i < $inputs.length; i++) {
    $curInput = $($inputs[i]);

    if ($curInput.attr('disabled') !== undefined) {
      $curInput.removeAttr('disabled');
      disabledInputs.Push(true);
    } else 
      disabledInputs.Push(false);
  }

  // add attributes
  setTimeout(function() {
    for (var i = 0; i < $inputs.length; i++) {

      if (disabledInputs[i] === true)
        $($inputs[i]).attr('disabled', true);

    }
  }, 1);

});

erstellen Sie eine CSS-Klasse, zB: 

.disable{
        pointer-events: none;
        opacity: 0.5;
}

wende diese Klasse anstelle des deaktivierten Attributs an

Schon seit:

• das Festlegen des Readonly-Attributs auf das Kontrollkästchen ist gemäß der HTML-Spezifikation nicht gültig. 
• die Verwendung eines verborgenen Elements zum Übermitteln von Werten ist nicht sehr schön und
• die Einstellung onclick JavaScript, das das Ändern des Wertes verhindert, ist auch nicht sehr schön

Ich werde dir eine andere Möglichkeit anbieten: 

Setzen Sie Ihr Kontrollkästchen wie gewohnt deaktiviert. Aktivieren Sie dieses Kontrollkästchen vor dem Senden des Formulars durch den Benutzer.

<script>
    function beforeSumbit() {
        var checkbox = document.getElementById('disabledCheckbox');
        checkbox.disabled = false;
    }
</script>
...
<form action="myAction.do" method="post" onSubmit="javascript: beforeSubmit();">
    <checkbox name="checkboxName" value="checkboxValue" disabled="disabled" id="disabledCheckbox" />
    <input type="submit />
</form>

Da das Kontrollkästchen aktiviert ist, bevor das Formular gesendet wird, wird der Wert auf übliche Weise gebucht. Das einzige, was an dieser Lösung nicht besonders erfreulich ist, ist, dass dieses Kontrollkästchen für einige Zeit aktiviert wird und von Benutzern gesehen werden kann. Aber es ist nur ein Detail, mit dem ich leben kann.

Deaktiviere es nicht; Setzen Sie es stattdessen auf readonly, obwohl dies keine Auswirkungen hat, da der Benutzer den Status nicht ändern darf. Sie können dies jedoch mithilfe von jQuery erzwingen (verhindern, dass der Benutzer den Status des Kontrollkästchens ändert):

$('input[type="checkbox"][readonly="readonly"]').click(function(e){
    e.preventDefault();
});

Dies setzt voraus, dass alle Kontrollkästchen, die nicht geändert werden sollen, das Attribut "readonly" haben. z.B.

<input type="checkbox" readonly="readonly">

Fügen Sie dem Formular onsubmit="this['*nameofyourcheckbox*'].disabled=false" hinzu.

Leider gibt es keine "einfache" Lösung. Das Attribut "Readonly" kann nicht auf Kontrollkästchen angewendet werden. Ich habe die W3-Spezifikation über die Checkbox gelesen und den Täter gefunden:

Wenn ein Steuerelement beim Senden des Formulars nicht über einen aktuellen Wert verfügt, müssen Benutzerprogramme es nicht als erfolgreiches Steuerelement behandeln. ( http://www.w3.org/TR/ html401/interact/forms.html # h-17.13.2 )

Dies führt dazu, dass der ungeprüfte Zustand und der deaktivierte Zustand zu dem gleichen analysierten Wert führen.

• readonly = "readonly" ist kein gültiges Attribut für Kontrollkästchen.
• onclick = "event.preventDefault ();" ist nicht immer eine gute Lösung, da sie in der Checkbox selbst ausgelöst wird. In manchen Fällen kann es aber auch Reize wirken.
• Das Aktivieren des Kontrollkästchens onSubmit ist keine Lösung, da das Steuerelement immer noch nicht als erfolgreiches Steuerelement behandelt wird und der Wert nicht analysiert wird.
• Das Hinzufügen einer anderen verborgenen Eingabe mit demselben Namen in Ihrem HTML-Code funktioniert nicht, da der erste Steuerwert durch den zweiten Steuerwert überschrieben wird, da er denselben Namen hat.

Der einzige vollständige Beweis dafür ist fügen Sie beim Senden des Formulars eine verborgene Eingabe mit demselben Namen mit Javascript hinzu.

Sie können den kleinen Ausschnitt verwenden, den ich dafür gemacht habe:

function disabled_checkbox() {
  var theform = document.forms[0];
  var theinputs = theform.getElementsByTagName('input');
  var nrofinputs = theinputs.length;
  for(var inputnr=0;inputnr<nrofinputs;inputnr++) {
    if(theinputs[inputnr].disabled==true) {
      var thevalueis = theinputs[inputnr].checked==true?"on":"";
      var thehiddeninput = document.createElement("input");
      thehiddeninput.setAttribute("type","hidden");
      thehiddeninput.setAttribute("name",theinputs[inputnr].name);
      thehiddeninput.setAttribute("value",thevalueis);
      theinputs[inputnr].parentNode.appendChild(thehiddeninput);
    }
  }
}

Dies sucht nach dem ersten Formular im Dokument, sammelt alle Eingaben und sucht nach deaktivierten Eingaben. Wenn eine deaktivierte Eingabe gefunden wird, wird in parentNode eine ausgeblendete Eingabe mit demselben Namen und dem Wert "on" (wenn der Status "geprüft" ist) und "" erstellt (wenn der Status "" ist - nicht markiert).

Diese Funktion sollte durch das Ereignis 'onsubmit' im FORM-Element ausgelöst werden:

<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>

Es gibt keine andere Option als ein hidden-Feld. Versuchen Sie daher, ein hidden-Feld zu verwenden, wie im folgenden Code gezeigt:

<input type="hidden" type="text" name="chk1[]" id="tasks" value="xyz" >
<input class="display_checkbox" type="checkbox" name="chk1[]" id="tasks" value="xyz" checked="check"  disabled="disabled" >Tasks

<html>
    <head>
    <script type="text/javascript">
    function some_name() {if (document.getElementById('first').checked)      document.getElementById('second').checked=false; else document.getElementById('second').checked=true;} 
    </script>
    </head>
    <body onload="some_name();">
    <form>
    <input type="checkbox" id="first" value="first" onclick="some_name();"/>first<br/>
    <input type="checkbox" id="second" value="second" onclick="some_name();" />second
    </form>
    </body>
</html>

Die Funktion some_name ist ein Beispiel für eine vorherige Klausel zum Verwalten des zweiten Kontrollkästchens, das entsprechend der Klausel aktiviert (veröffentlicht seinen Wert) oder nicht aktiviert (nicht seinen Wert veröffentlicht) und der Benutzer kann seinen Status nicht ändern. Es ist nicht erforderlich, das Deaktivieren des zweiten Kontrollkästchens zu verwalten 

Sie können es wie gewünscht deaktivieren und das deaktivierte Attribut entfernen, bevor das Formular gesendet wird.

$('#myForm').submit(function() {
    $('checkbox').removeAttr('disabled');
});

Hinzufügen von onclick="this.checked=true"Siehe mein Problem:
Beispiel: 

<input type="checkbox" id="scales" name="feature[]" value="scales" checked="checked" onclick="this.checked=true" />