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

130

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?

Ein Lehrling
quelle
Ich denke, diese Lösung hilft auch hier: stackoverflow.com/questions/12769664/…
Sergej Fomin
Ich denke, diese Lösung hilft auch hier: stackoverflow.com/questions/12769664/…
Sergej Fomin

Antworten:

106

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

Francesco Laurita
quelle
7
Um es zu einem gültigen HTML-Code zu machen, setzen Sie den Wert von readonly auf readonly, dh:<input name="foo" value="bar" readonly="readonly" />
Matt Huggins
5
Um das Eingabefeld "schreibgeschützt" wie das Feld "deaktiviert" aussehen zu lassen, setzen Sie 'style = "color: grey; background-color: # F0F0F0;"'.
Dan Nissenbaum
3
@MattHuggins Das Festlegen des Werts für Attribute mit nur Attributnamen wie aktiviert, schreibgeschützt usw. und der Schrägstrich für Nicht-Paar-Attribute hat nichts mit der HTML-Gültigkeit zu tun - diese werden für die XHTML-Gültigkeit benötigt ...
jave.web
Übrigens: Vielleicht stolpert jemand darüber: VERWENDEN SIE ES NICHT für Eingabetyp = Schaltfläche, er wird nicht "deaktiviert", verwenden Sie "deaktiviert =" deaktiviert "
Meister Schnitzel
2
readonlyfunktioniert nicht, da Sie den Wert eines Kontrollkästchens mit einem solchen Tag nicht veröffentlichen können. Verwenden Sie es disabledzusammen mit dem versteckten Eingabeelement, um den Wert des Kontrollkästchens zu speichern.
Weitere
91

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

mikhail-t
quelle
müssen hier gleiche ids für versteckte und checkbox eingaben sein?
user2167382
Nein, Id kann was auch immer sein, aber 'Name' und 'Wert' müssen gleich sein.
mikhail-t
Wie zuverlässig ist dies in verschiedenen Browsern?
Tim
Dies wurde getestet und funktionierte gut in den neuesten Chrome, Firefox und IE 11, hier ist eine Implementierung, versuchen Sie es in Ihrem Browser: mvccbl.com/…
mikhail-t
74

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

$("form").submit(function() {
    $("input").removeAttr("disabled");
});
Tristan Channing
quelle
Wird dadurch das Steuerelement in der Benutzeroberfläche "aktiviert"?
Anar Khalilov
Es entfernt das deaktivierte Attribut also theoretisch ja. In der Praxis glaube ich nicht, dass der Benutzer das Feld über die Benutzeroberfläche zwischen diesem Ereignis und dem übermittelten Formular ändern kann ... Ich wäre interessiert, es sicher zu wissen.
Tristan Channing
Ein bisschen alt, aber als Nebenbemerkung: Wenn Sie <select>oder <textfield>oder andere HTML - Elemente, die das unterstützen disabledAttribut, können Sie sie auswählen und aktivieren Sie alle mit: $( "*:disabled" ).removeAttr("disabled");
Gusstavv Gil
10

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.

Jessegavin
quelle
5
Hassen Sie es nicht einfach, wenn Sie eine komplizierte Lösung für ein Problem aufschreiben und dann, wenn Sie sich aktualisieren, jemand (wie Francesco) einen einfachen Einzeiler schreibt? ;)
Jessegavin
Dies ist perfekt für das, was ich erreichen möchte. Ich möchte, dass das deaktivierte Kontrollkästchen einen Wert anstelle von nichts übermittelt, danke: D.
Geoffrey
@jessegavin Angesichts der Tatsache, dass sein "einfacher Einzeiler" nicht mehr funktioniert und er seine Antwort so aktualisiert hat, dass sie Ihren enthält, kann ich nicht sagen, dass ich dies tue.
RyanfaeScotland
8
<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!.

PaoloMarass
quelle
dies wird einfach duplizieren , was das Kontrollkästchen bereits der Fall ist, aber wenn es von Javascript oder soemthing es wird immer noch deaktiviert ist , könnten Sie ein bisschen mehr erklären deaktiviert , was Sie, vielleicht habe ich mis seit seiner nur eine Zeile Code zu verstehen wollten wurde
ScottC
8

Erstellen Sie eine CSS-Klasse, z.

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

Wenden Sie diese Klasse anstelle des deaktivierten Attributs an

Austin Rodrigues
quelle
7

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/

thatFunkymunkey
quelle
4

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

});
Andi R.
quelle
3

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">
Peter
quelle
Danke dafür! Aus irgendeinem Grund funktionierte "versteckte" Eingabe bei mir nicht. Das hat mich gerettet. Sehr schöner Hack!
NewbieProgrammer
3

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.

sporak
quelle
1

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();'>
JPA
quelle
1

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

GuiltyScarl3t
quelle
1

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
Om R Kattimani
quelle
0
<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

Paolomarass
quelle
0

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');
});
Sergej Fomin
quelle
0

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" />
berramou
quelle
0

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.

Mahib
quelle
0

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.

Raj Pawan Gumdal
quelle