Wie kann ich ein deaktiviertes Eingabe-Kontrollkästchen veröffentlichen / senden?

Ich habe ein Kontrollkästchen, das unter bestimmten Bedingungen deaktiviert werden muss. Es stellt sich heraus, dass HTTP keine deaktivierten Eingaben veröffentlicht.

Wie kann ich das umgehen? Senden der Eingabe, auch wenn sie deaktiviert ist, und Beibehalten der Eingabe deaktiviert?

UPDATE : Funktioniert READONLYnicht bei Kontrollkästchen

Sie können verwenden, disabled="disabled"aber an diesem Punkt wird der Wert des Kontrollkästchens nicht in POSTWerten angezeigt. Eine der Strategien besteht darin, ein verstecktes Feld hinzuzufügen, das den Wert des Kontrollkästchens im selben Formular enthält, und den Wert aus diesem Feld zurückzulesen

Einfach wechseln disabledzureadonly

Ich habe das Problem gelöst.

Da das readonly="readonly"Tag nicht funktioniert (ich habe verschiedene Browser ausprobiert), müssen Sie disabled="disabled" stattdessen verwenden. Aber der Wert Ihres Kontrollkästchens wird dann nicht veröffentlicht ...

Hier ist meine Lösung:

Fügen Sie einfach eine versteckte "Eingabe" mit demselben Namen und Wert wie Ihr Kontrollkästchen hinzu, um das "schreibgeschützte" Aussehen und den Wert des POST- Kontrollkästchens gleichzeitig zu erhalten . Sie müssen es neben Ihrem Kontrollkästchen oder zwischen denselben Tags aufbewahren:<form></form>

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

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

Auch nur um dich wissen zu lassen readonly="readonly", readonly="true", readonly="",oder einfach READONLYNICHT zu lösen! 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 senden:

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

Sie könnten so vorgehen ... Erstellen Sie für jedes Kontrollkästchen ein verstecktes Feld mit demselben nameAttribut. Legen Sie jedoch den Wert dieses ausgeblendeten Felds mit einem Standardwert fest, mit dem Sie testen können. Beispielsweise..

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

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

"agree,false"

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

"false"

Sie könnten einen beliebigen Wert anstelle von "false" verwenden, aber Sie haben die Idee.

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

Ich ging von dem Problem aus: "Wie poste / sende ich ein deaktiviertes Eingabe-Kontrollkästchen?" und in meiner Antwort habe ich den Kommentar übersprungen: "Wenn wir ein Kontrollkästchen deaktivieren möchten, müssen wir sicher einen Präfixwert beibehalten (aktiviert oder deaktiviert) und wir möchten, dass der Benutzer davon Kenntnis hat (andernfalls sollten wir einen versteckten Typ und verwenden." kein Kontrollkästchen) ". In meiner Antwort nahm ich an, dass wir immer ein Kontrollkästchen aktivieren möchten und dass der Code auf diese Weise funktioniert. Wenn wir auf diese Ckeckbox klicken, wird sie für immer überprüft und ihr Wert wird VERÖFFENTLICHT / übermittelt! Auf die gleiche Weise wird, wenn ich onclick = "this.checked = false" schreibe, ohne "checked" = "Checked" (Hinweis: Standard ist deaktiviert), wird es für immer deaktiviert und sein Wert wird nicht POSTED / Submitted!.

Erstellen Sie eine CSS-Klasse, z.

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

Wenden Sie diese Klasse anstelle des deaktivierten Attributs an

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 es wird weiterhin sein Wert gesendet, wenn das Formular gesendet wird. Entfernen Sie das Kontrollkästchen, wenn der Benutzer dieses Kontrollkästchen nicht aktivieren soll.

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

http://jsfiddle.net/vwUUc/

Das funktioniert wie ein Zauber:

1. Entfernen Sie die "deaktivierten" Attribute
2. Senden Sie das Formular
3. Fügen Sie die Attribute erneut hinzu. Der beste Weg, dies zu tun, ist die Verwendung einer setTimeOut- Funktion, z. B. mit einer Verzögerung von 1 Millisekunde.

Der einzige Nachteil ist das kurze Aufleuchten der deaktivierten Eingabefelder beim Senden. Zumindest in meinem Szenario ist das kein großes 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);

});

Deaktiviere es nicht; Stellen Sie es stattdessen auf schreibgeschützt ein, obwohl dies keine Auswirkung hat, da der Benutzer den Status nicht ändern kann. Sie können jQuery jedoch verwenden, um dies zu erzwingen (verhindern Sie, 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 Sie nicht ändern möchten, das Attribut "schreibgeschützt" haben. z.B.

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

Schon seit:

• Das Setzen des schreibgeschützten Attributs auf das Kontrollkästchen ist gemäß der HTML-Spezifikation nicht gültig.
• Die Verwendung von versteckten Elementen zum Übermitteln von Werten ist nicht sehr hübsch
• Das Einstellen von onclick JavaScript, das verhindert, dass sich der Wert ändert, ist auch nicht sehr schön

Ich werde Ihnen eine andere Möglichkeit anbieten:

Setzen Sie Ihr Kontrollkästchen wie gewohnt deaktiviert. Und bevor das Formular vom Benutzer gesendet wird, aktivieren Sie dieses Kontrollkästchen mit JavaScript.

<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 sein Wert auf übliche Weise gebucht. Das einzige, was an dieser Lösung nicht sehr angenehm ist, ist, dass dieses Kontrollkästchen für eine Weile aktiviert ist und von den Benutzern gesehen werden kann. Aber es ist nur ein Detail, mit dem ich leben kann.

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

Wenn ein Steuerelement beim Senden des Formulars keinen aktuellen Wert hat, müssen Benutzeragenten 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 deaktivierte und der deaktivierte Status denselben analysierten Wert ergeben.

• readonly = "readonly" ist kein gültiges Attribut für Kontrollkästchen.
• onclick = "event.preventDefault ();" ist nicht immer eine gute Lösung, da sie über das Kontrollkästchen selbst ausgelöst wird. Aber es kann in einigen Fällen Zauber 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 weiteren versteckten 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.

Die einzige vollständige Möglichkeit, dies zu tun, besteht darin , beim Absenden des Formulars eine versteckte Eingabe mit demselben Namen und Javascript hinzuzufügen .

Sie können das kleine Snippet verwenden, das 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 im parentNode eine versteckte Eingabe mit demselben Namen und dem Wert 'on' (wenn der Status 'geprüft' ist) und '' (wenn der Status '' ist - nicht geprüft) erstellt.

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

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

onsubmit="this['*nameofyourcheckbox*'].disabled=false"Zum Formular hinzufügen .

Es gibt keine andere Option als ein hiddenFeld. Versuchen Sie daher, ein hiddenFeld 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 gemäß der Klausel aktiviert (veröffentlicht seinen Wert) oder deaktiviert (veröffentlicht seinen Wert nicht) ist und der Benutzer seinen Status nicht ändern kann. Das Deaktivieren des zweiten Kontrollkästchens muss nicht verwaltet werden

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

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

Hinzufügen onclick="this.checked=true"Löse mein Problem:
Beispiel:

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

Hier ist eine weitere Problemumgehung, die vom Backend aus gesteuert werden kann.

ASPX

<asp:CheckBox ID="Parts_Return_Yes" runat="server" AutoPostBack="false" />

In ASPX.CS

Parts_Return_Yes.InputAttributes["disabled"] = "disabled";
Parts_Return_Yes.InputAttributes["class"] = "disabled-checkbox";

Klasse wird nur für Stilzwecke hinzugefügt.

Ich habe gerade die HTML-, JS- und CSS-Vorschläge in den Antworten hier kombiniert

HTML:

<input type="checkbox" readonly>

jQuery:

(function(){
    // Raj: https://stackoverflow.com/a/14753503/260665
    $(document).on('click', 'input[type="checkbox"][readonly]', function(e){
        e.preventDefault();
    });
})();

CSS:

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

Da das Element nicht deaktiviert ist, durchläuft es weiterhin den POST.