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

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?

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

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

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

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

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.

<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 !.

créer une classe css par exemple:

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

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

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/

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

});

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">

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.

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

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

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

<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

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

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

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.

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.