comment POST / Submit une case à cocher d’entrée désactivée?

J’ai une case à cocher qui, sous 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?

MISE À JOUR : READONLY ne 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 valeurs POST . L’une des stratégies consiste à append un champ masqué contenant la valeur de la case à cocher dans le même formulaire et à lire la valeur de ce champ.

Changer simplement disabled en readonly

J’ai résolu ce problème.

Comme le tag readonly="readonly" ne fonctionne pas (j’ai essayé différents navigateurs), vous devez plutôt utiliser disabled="disabled" . Mais la valeur de votre case à cocher ne sera pas publiée alors …

Voici ma solution:

Pour obtenir l’apparence “readonly” et la valeur de la case à cocher POST dans le 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 balises

:

 SOME TEXT  

Aussi, juste pour vous laisser savoir readonly readonly="readonly", readonly="true", readonly="", ou simplement READONLY ne résoudra PAS cela! J’ai passé quelques heures à le comprendre!

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

Si vous êtes satisfait de l’utilisation de JQuery, supprimez l’atsortingbut désactivé lors de l’envoi du formulaire:

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

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

   

Si la case à cocher est “cochée” lorsque le formulaire est soumis, la valeur de ce paramètre de formulaire sera alors

 "agree,false" 

Si la case à cocher n’est pas cochée, alors la valeur serait

 "false" 

Vous pouvez utiliser n’importe quelle valeur au lieu de “false”, mais vous obtenez l’idée.

  

J’ai commencé par le problème: “Comment POST / Submit a Input Checkbox qui est désactivé?” et dans ma réponse, j’ai sauté le commentaire: “Si nous voulons désactiver une case à cocher, nous avons sûrement besoin de conserver une valeur préfixée (cochée ou décochée) et que l’utilisateur soit conscient de cela (sinon pas une case à cocher) “. Dans ma réponse, je suppose que nous voulons toujours cocher une case et que ce code fonctionne de cette manière. Si nous cliquons sur cette ckeckbox, celle-ci sera vérifiée pour toujours et sa valeur sera POSTE / soumise! De la même manière si j’écris onclick = “this.checked = false” sans checked = “checked” (note: la case par défaut est décochée), elle sera pour toujours décochée et sa valeur ne sera pas publiée / soumise !.

Le moyen le plus simple est de:

  

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

De plus, vous pouvez utiliser javascript pour effacer le onclick une fois la condition remplie (si c’est ce que vous recherchez). Voici un violon malicieux montrant ce que je veux dire. Ce n’est pas parfait, mais vous comprenez l’essentiel.

http://jsfiddle.net/vwUUc/

Ça fonctionne super bien:

  1. Supprimer les atsortingbuts “disabled”
  2. Soumettre le formulaire
  3. Ajoutez à nouveau les atsortingbuts. 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 atsortingbutes 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); }); 

Depuis:

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

Je vais vous offrir une autre possibilité:

Cochez la case désactivée comme d’habitude. Et avant que le formulaire soit soumis par l’utilisateur, cochez cette case en JavaScript.

  ... 

créer une classe css par exemple:

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

appliquer cette classe au lieu de l’atsortingbut désactivé

Ne pas le désactiver placez-le plutôt en lecture seule, bien que cela n’ait aucun effet en ne permettant pas à l’utilisateur de modifier l’état. Mais vous pouvez utiliser jQuery pour le faire respecter (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’atsortingbut “readonly”. par exemple.

  

Malheureusement, il n’y a pas de solution «simple». L’atsortingbut readonly ne peut pas être appliqué aux cases à cocher. J’ai lu les spécifications de W3 concernant la case à cocher et j’ai trouvé le coupable:

Si un contrôle n’a pas de valeur actuelle lors de la soumission du formulaire, les agents utilisateurs ne sont pas obligés 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 obtenir la même valeur analysée.

  • readonly = “readonly” n’est pas un atsortingbut 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 il peut y avoir 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, de sorte que la valeur ne sera pas analysée.
  • L’ajout d’une autre entrée masquée portant le même nom dans votre code HTML ne fonctionne pas car la première valeur de contrôle est remplacée par la deuxième valeur de contrôle car elle porte le même nom.

Le seul moyen complet de le faire est d’ append 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 

Ceci 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 '' - n'est pas cochée).

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

  

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

      
first
second

Fonction some_name est un exemple de clause précédente permettant de gérer la deuxième case à cocher qui est cochée (affiche sa valeur) ou décochée (ne publie pas sa valeur) conformément à la clause et l’utilisateur ne peut pas modifier son statut; il n’est pas nécessaire de gérer toute désactivation de la deuxième case à cocher

Il n’y a pas d’autre option qu’un champ hidden , alors essayez d’utiliser un champ hidden comme démontré dans le code ci-dessous:

  Tasks 

Vous pouvez le garder désactivé selon vos besoins, puis supprimer l’atsortingbut désactivé avant de soumettre le formulaire.

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

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