web-dev-qa-db-fra.com

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

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

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

htmlhtml-formhtml-input
119
AnApprentice

UPDATE: READONLY ne fonctionne pas avec 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. Une des stratégies consiste à ajouter un champ caché contenant la valeur d'une case à cocher dans le même formulaire et à relire la valeur de ce champ.

Remplacez simplement disabled par readonly

101
Francesco Laurita

J'ai résolu ce problème.

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

Voici ma solution:

Pour obtenir "readonly" look 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 garder à côté de votre case à cocher ou entre les mêmes balises <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" />

Aussi, juste pour que vous sachiez que readonly="readonly", readonly="true", readonly="", ou que READONLY ne résoudra PAS ceci! 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

88
mik-t

Si vous êtes satisfait d’utiliser JQuery, supprimez l’attribut disabled lors de la soumission du formulaire:

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

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

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

Si la case à cocher est "cochée" lors de la soumission du formulaire, la valeur de ce paramètre de formulaire sera

"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 avez l'idée.

10
jessegavin

Le moyen le plus simple d'y parvenir est:

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

Cela empêchera l'utilisateur de pouvoir désélectionner cette case et il transmettra toujours sa valeur lors de l'envoi du formulaire. Supprimer coché si vous voulez que l'utilisateur ne puisse pas cocher cette case.

En outre, vous pouvez ensuite utiliser javascript pour supprimer onClick une fois qu'une certaine condition est remplie (si c'est ce que vous recherchez). Voici un violon sombre et sale montrant ce que je veux dire. Ce n'est pas parfait, mais vous obtenez le Gist.

http://jsfiddle.net/vwUUc/

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

J'ai commencé par le problème: "comment post/soumettre une case à cocher d'entrée qui est désactivée?" et dans ma réponse, j'ai ignoré 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 aussi 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 cochée et que le code fonctionne de cette manière. Si nous cliquons sur cette ckeckbox, elle sera vérifiée à jamais et sa valeur sera POSTED/Submitted! De même si j'écris onclick = "this.checked = false" sans coché = "coché" (note: la case par défaut est cochée), elle sera toujours décochée et sa valeur ne sera pas POSTED/Submitted !.

7
PaoloMarass

Ça fonctionne super bien:

  1. Remove les attributs "disabled"
  2. Soumettre le formulaire
  3. Ajouter les attributs à nouveau. 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 court clignotement des champs de saisie désactivés lors de la soumission. Au moins dans mon scénario, ce n’est pas 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);

});
4
Andi R

créer une classe css par exemple: 

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

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

4
Austin Rodrigues

Puisque:

  • définir l'attribut readonly sur checkbox n'est pas valide selon la spécification HTML, 
  • en utilisant un élément caché pour soumettre la valeur n'est pas très jolie façon et
  • régler JavaScript qui empêche de changer de valeur n'est pas très gentil 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, cochez cette case avec 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>

Comme la case à cocher est activée avant la soumission du formulaire, sa valeur est publiée de manière courante. La seule chose qui n’est pas très agréable avec cette solution, c’est que cette case à cocher est activée pendant un certain temps et que les utilisateurs peuvent la visualiser. Mais c'est juste un détail avec lequel je peux vivre.

3
sporak

Ne le désactivez pas; à la place, réglez-le sur readonly, bien que cela n’a aucun effet car il ne permet pas à l’utilisateur de changer d’état. Mais vous pouvez utiliser jQuery pour imposer cela (empêcher l’utilisateur de changer 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 "readonly". par exemple.

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

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

1
GuiltyScarl3t

Malheureusement, il n'y a pas de solution «simple». L'attribut en lecture seule ne peut pas être appliqué aux cases à cocher. J'ai lu la spécification W3 à propos de la case à cocher et 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 fait que l'état non vérifié et l'état désactivé produisent 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 par la case à cocher elle-même. Mais cela peut faire 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 seconde, car elle porte le même nom.

La seule façon de le faire consiste à ajouter une entrée masquée portant 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 du 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 'coché') et '' si l'état est '' - pas coché.

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

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

Il n'y a pas d'autre option qu'un champ hidden, essayez donc d'utiliser un champ hidden comme le montre 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
0
Om R Kattimani
<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 nom_comme 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 poste 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 la désactivation de la deuxième case à cocher 

0
paolomarass

Vous pouvez le laisser désactivé comme vous le souhaitez, puis supprimer l'attribut désactivé avant la soumission du formulaire.

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

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