comment POST / Soumettre une case à cocher d'entrée qui est désactivée?

130

J'ai une case à cocher qui, dans certaines conditions, doit être désactivée. Il s'avère que HTTP ne publie pas les entrées désactivées.

Comment puis-je contourner cela? soumettre l'entrée même si elle est désactivée et garder l'entrée désactivée?

Un apprenti
la source
Je pense que cette solution aide également ici: stackoverflow.com/questions/12769664/…
Sergej Fomin
Je pense que cette solution aide également ici: stackoverflow.com/questions/12769664/…
Sergej Fomin

Réponses:

106

MISE À JOUR : READONLYne fonctionne pas sur les cases à cocher

Vous pouvez utiliser disabled="disabled"mais à ce stade, la valeur de la case à cocher n'apparaîtra pas dans les POSTvaleurs. L'une des stratégies consiste à ajouter un champ masqué contenant la valeur de la case à cocher dans le même formulaire et à lire la valeur à partir de ce champ

Changez simplement disabledenreadonly

Francesco Laurita
la source
7
Pour rendre le HTML valide, définissez spécifiquement la valeur de readonly sur readonly, c'est-à-dire:<input name="foo" value="bar" readonly="readonly" />
Matt Huggins
5
Pour que le champ de saisie "lecture seule" ressemble au champ "désactivé", définissez 'style = "color: gray; background-color: # F0F0F0;"'.
Dan Nissenbaum
3
@MattHuggins La valeur de réglage pour les attributs de nom d'attribut uniquement comme vérifié, lecture seule, etc. et la barre oblique de fin sur les attributs sans paire n'a rien à voir avec la validité HTML - elles sont nécessaires pour la validité XHTML ...
jave.web
Btw: Peut-être que quelqu'un trébuche à ce sujet: NE PAS L'UTILISER pour le type d'entrée = bouton, ils ne seront pas "désactivés", utilisez "disabled = 'disabled'"
Meister Schnitzel
2
readonlyne fonctionnera pas car vous ne pourrez pas publier la valeur d'une case à cocher avec une telle balise, utilisez disabledavec l'élément d'entrée masqué pour contenir la valeur de la case à cocher, voyez comment: stackoverflow.com/a/8274787/448816
mikhail-t
91

J'ai résolu ce problème.

Puisque la readonly="readonly"balise ne fonctionne pas (j'ai essayé différents navigateurs), vous devez utiliser à la disabled="disabled" place. Mais la valeur de votre case à cocher ne sera pas publiée alors ...

Voici ma solution:

Pour obtenir l' apparence "lecture seule" et la valeur de la case à cocher POST en même temps, ajoutez simplement une "entrée" masquée avec le même nom et la même valeur que votre case à cocher . Vous devez le conserver à côté de votre case à cocher ou entre les mêmes <form></form>balises:

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

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

Aussi, juste pour vous faire savoir readonly="readonly", readonly="true", readonly="",ou tout simplement READONLYne résoudra PAS cela! J'ai passé quelques heures à le découvrir!

Cette référence n'est pas non plus pertinente (peut-être pas encore, ou plus, je n'en ai aucune idée): http://www.w3schools.com/tags/att_input_readonly.asp

mikhail-t
la source
ici doit être les mêmes identifiants pour les entrées masquées et case à cocher?
user2167382
non, Id peut être n'importe quoi, mais «nom» et «valeur» doivent être identiques.
mikhail-t
Dans quelle mesure cela est-il fiable dans divers navigateurs?
Tim
cela a été testé et a bien fonctionné dans les derniers Chrome, Firefox et IE 11, voici une implémentation, essayez-la dans votre navigateur: mvccbl.com
...
74

Si vous êtes satisfait d'utiliser JQuery, supprimez l'attribut désactivé lors de la soumission du formulaire:

$("form").submit(function() {
    $("input").removeAttr("disabled");
});
Tristan Channing
la source
Cela rendra-t-il le contrôle "activé" dans l'interface utilisateur?
anar khalilov le
Il supprime l'attribut désactivé donc en théorie oui. En pratique, je ne pense pas que l'utilisateur puisse modifier le champ via l'interface utilisateur entre cela et le formulaire soumis ... Je serais intéressé de savoir avec certitude.
Tristan Channing le
Un peu vieux, mais comme note de bas de page: Si vous utilisez <select>ou <textfield>ou d'autres éléments HTML qui prennent en charge l' disabledattribut, vous pouvez les sélectionner et tous les activer avec: $( "*:disabled" ).removeAttr("disabled");
Gusstavv Gil
10

Vous pouvez le gérer de cette façon ... Pour chaque case à cocher, créez un champ masqué avec le même nameattribut. Mais définissez la valeur de ce champ masqué avec une valeur par défaut que vous pouvez tester. Par exemple..

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

Si la case est "cochée" lorsque le formulaire est soumis, la valeur de ce paramètre de formulaire sera

"agree,false"

Si la case n'est pas cochée, la valeur serait

"false"

Vous pouvez utiliser n'importe quelle valeur au lieu de "false", mais vous voyez l'idée.

Jességavin
la source
5
Ne détestez-vous pas simplement quand vous rédigez une solution compliquée à un problème et que lorsque vous rafraîchissez, quelqu'un (comme Francesco) écrit un simple one-liner? ;)
jessegavin
C'est parfait pour ce que j'essaie d'accomplir, je veux que la case à cocher non cochée soumette une valeur au lieu de rien, merci: D.
Geoffrey
@jessegavin Étant donné que son 'simple one liner' ne fonctionne plus et qu'il a mis à jour sa réponse pour inclure la vôtre, non, je ne peux pas dire que je le fais.
RyanfaeScotland
8
<input type="checkbox" checked="checked" onclick="this.checked=true" />

Je suis parti du problème: "comment POST / Soumettre une case à cocher d'entrée désactivée?" et dans ma réponse, j'ai sauté le commentaire: "Si nous voulons désactiver une case à cocher, nous devons sûrement conserver une valeur préfixée (cochée ou décochée) et nous voulons également que l'utilisateur en soit conscient (sinon nous devrions utiliser un type caché et pas une case à cocher) ". Dans ma réponse, j'ai supposé que nous voulions toujours garder une case à cocher et que le code fonctionne de cette manière. Si nous cliquons sur cette case à cocher, elle sera vérifiée pour toujours et sa valeur sera POSTED / Submitted! De la même manière si j'écris onclick = "this.checked = false" sans coché = "vérifié" (note: la valeur par défaut n'est pas cochée), il sera à jamais décoché et sa valeur ne sera pas POSTED / Submitted !.

PaoloMarass
la source
cela dupliquera simplement ce que la case à cocher fait déjà, mais si elle a été désactivée par javascript ou par quelque chose de logiciel, elle sera toujours désactivée, pourriez-vous expliquer un peu plus ce que vous vouliez, peut-être que je comprends mal car ce n'est qu'une ligne de code
ScottC
8

créer une classe css par exemple:

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

appliquer cette classe au lieu de l'attribut désactivé

Austin Rodrigues
la source
7

Le moyen le plus simple d'y parvenir est:

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

Cela empêchera l'utilisateur de décocher cette case et il soumettra toujours sa valeur lorsque le formulaire sera soumis. Supprimer coché si vous souhaitez que l'utilisateur ne puisse pas cocher cette case.

En outre, vous pouvez utiliser javascript pour effacer le clic une fois qu'une certaine condition a été remplie (si c'est ce que vous recherchez). Voici un violon sale qui montre ce que je veux dire. Ce n'est pas parfait, mais vous comprenez l'essentiel.

http://jsfiddle.net/vwUUc/

thatFunkymunkey
la source
4

Ça fonctionne super bien:

  1. Supprimer les attributs "désactivés"
  2. Soumettez le formulaire
  3. Ajoutez à nouveau les attributs. La meilleure façon de faire est d'utiliser une fonction setTimeOut , par exemple avec un délai de 1 milliseconde.

Le seul inconvénient est le bref clignotement des champs de saisie désactivés lors de la soumission. Au moins dans mon scénario, ce n'est pas vraiment un problème!

$('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
la source
3

Ne le désactivez pas; au lieu de cela, définissez-le sur lecture seule, bien que cela n'ait aucun effet car il ne permet pas à l'utilisateur de modifier l'état. Mais vous pouvez utiliser jQuery pour appliquer cela (empêcher l'utilisateur de modifier l'état de la case à cocher:

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

Cela suppose que toutes les cases à cocher que vous ne souhaitez pas modifier ont l'attribut "lecture seule". par exemple.

<input type="checkbox" readonly="readonly">
Peter
la source
Merci pour ça! Pour une raison quelconque, l'entrée «cachée» ne fonctionnait pas pour moi. Cela m'a sauvé. Très beau hack en effet!
NewbieProgrammer
3

Puisque:

  • la définition de l'attribut readonly sur la case à cocher n'est pas valide selon la spécification HTML,
  • utiliser un élément caché pour soumettre de la valeur n'est pas très joli et
  • définir onclick JavaScript qui empêche de changer la valeur n'est pas très agréable aussi

Je vais vous offrir une autre possibilité:

Définissez votre case à cocher comme désactivée comme d'habitude. Et avant que le formulaire ne soit soumis par l'utilisateur, activez cette case à cocher par 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>

La case à cocher étant activée avant l'envoi du formulaire, sa valeur est publiée de manière courante. La seule chose qui n'est pas très agréable dans cette solution est que cette case à cocher devient activée pendant un certain temps et qu'elle peut être vue par les utilisateurs. Mais c'est juste un détail avec lequel je peux vivre.

sporak
la source
1

Malheureusement, il n’existe pas de solution «simple». L'attribut lecture seule ne peut pas être appliqué aux cases à cocher. J'ai lu la spécification W3 sur la case à cocher et j'ai trouvé le coupable:

Si un contrôle n'a pas de valeur actuelle lorsque le formulaire est soumis, les agents utilisateurs ne sont pas tenus de le traiter comme un contrôle réussi. ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 )

Cela provoque l'état non vérifié et l'état désactivé pour aboutir à la même valeur analysée.

  • readonly = "readonly" n'est pas un attribut valide pour les cases à cocher.
  • onclick = "event.preventDefault ();" n'est pas toujours une bonne solution car elle est déclenchée sur la case à cocher elle-même. Mais cela peut fonctionner des charmes dans certaines occasions.
  • L'activation de la case à cocher onSubmit n'est pas une solution car le contrôle n'est toujours pas traité comme un contrôle réussi et la valeur ne sera donc pas analysée.
  • L'ajout d'une autre entrée masquée avec le même nom dans votre HTML ne fonctionne pas car la première valeur de contrôle est écrasée par la deuxième valeur de contrôle car elle porte le même nom.

Le seul moyen fiable de le faire est d' ajouter une entrée masquée avec le même nom avec javascript lors de la soumission du formulaire .

Vous pouvez utiliser le petit extrait que j'ai créé pour cela:

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

Cela recherche le premier formulaire dans le document, rassemble toutes les entrées et recherche les entrées désactivées. Lorsqu'une entrée désactivée est trouvée, une entrée masquée est créée dans le parentNode avec le même nom et la valeur 'on' (si son état est 'vérifié') et '' (si son état est '' - non vérifié).

Cette fonction doit être déclenchée par l'événement 'onsubmit' dans l'élément FORM comme:

<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>
JPA
la source
1

Ajoutez onsubmit="this['*nameofyourcheckbox*'].disabled=false"au formulaire.

CoupableScarl3t
la source
1

Il n'y a pas d'autre option qu'un hiddenchamp, alors essayez d'utiliser un hiddenchamp comme illustré dans le code ci-dessous:

<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
la source
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>

La fonction some_name est un exemple de clause précédente pour gérer la deuxième case à cocher qui est cochée (publie sa valeur) ou décochée (ne publie pas sa valeur) selon la clause et l'utilisateur ne peut pas modifier son statut; il n'est pas nécessaire de gérer la désactivation de la deuxième case à cocher

paolomarass
la source
0

Vous pouvez le garder désactivé à votre guise, puis supprimer l'attribut désactivé avant l'envoi du formulaire.

$('#myForm').submit(function() {
    $('checkbox').removeAttr('disabled');
});
Sergej Fomin
la source
0

Ajout de onclick="this.checked=true"Résoudre mon problème:
Exemple:

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

Voici un autre travail qui peut être contrôlé depuis le backend.

ASPX

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

Dans ASPX.CS

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

La classe n'est ajoutée qu'à des fins de style.

Mahib
la source
0

Je viens de combiner les suggestions HTML, JS et CSS dans les réponses ici

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

Puisque l'élément n'est pas «désactivé», il passe toujours par le POST.

Raj Pawan Gumdal
la source