Les cases à cocher HTML peuvent-elles être définies sur Readonly?

Je pensais qu’ils pourraient l’être, mais comme je ne mets pas mon argent là où ma bouche était (pour ainsi dire), définir l’atsortingbut readonly ne semble rien faire.

Je préférerais ne pas utiliser Désactivé, puisque je veux que les cases à cocher cochées soient soumises avec le rest du formulaire, je ne veux tout simplement pas que le client puisse les modifier dans certaines circonstances.

vous pouvez utiliser ceci:

  

Cela fonctionne car le retour de false à partir de l’événement click empêche la poursuite de la chaîne d’exécution.

READONLY ne fonctionne pas sur les cases à cocher car cela vous empêche de modifier la valeur d’ un champ, mais avec une case à cocher, vous modifiez en fait l’ état du champ (on || off)

De faqs.org :

Il est important de comprendre que READONLY empêche simplement l’utilisateur de modifier la valeur du champ, et non d’interagir avec le champ. Dans les cases à cocher, par exemple, vous pouvez les activer ou les désactiver (définissant ainsi l’état CHECKED), mais vous ne modifiez pas la valeur du champ.

Si vous ne souhaitez pas utiliser la valeur disabled mais que vous souhaitez quand même soumettre la valeur, que diriez-vous de soumettre la valeur en tant que champ masqué et d’imprimer son contenu uniquement lorsque l’utilisateur ne remplit pas les critères de modification? par exemple

 // user allowed change if($user_allowed_edit) { echo ' Check value'; } else { // Not allowed change - submit value.. echo ''; // .. and show user the value being submitted echo ' Check value'; } 

Ceci est une case à cocher que vous ne pouvez pas modifier:

  

Ajoutez simplement disabled="disabled" en tant qu’atsortingbut.

Modifier pour répondre aux commentaires:

Si vous souhaitez que les données soient publiées, une solution simple consiste à appliquer le même nom à une entrée masquée:

   

De cette façon, lorsque la case à cocher est désactivée, elle sert uniquement à représenter visuellement les données, au lieu de les “relier” aux données. Dans la publication, la valeur de l’entrée masquée est envoyée lorsque la case à cocher est désactivée.

  

Mais vous devez absolument valider les données sur le serveur pour vous assurer qu’il n’a pas été modifié.

une autre “solution simple”:

     

disabled = “désactivé” / désactivé = true

Cela présente un problème de convivialité.

Si vous souhaitez afficher une case à cocher, mais ne pas laisser interagir avec elle, pourquoi même une case à cocher alors?

Cependant, mon approche serait d’utiliser désactivé (L’utilisateur s’attend à ce qu’une case à cocher désactivée ne soit pas modifiable, au lieu d’utiliser JS pour que celle activée ne fonctionne pas), et ajoute un gestionnaire de soumission de formulaire qui active des cases à cocher juste avant le formulaire. soumis. De cette façon, vous obtenez vos valeurs affichées.

c’est à dire quelque chose comme ça:

 var form = document.getElementById('yourform'); form.onSubmit = function () { var formElems = document.getElementsByTagName('INPUT'); for (var i = 0; i , formElems.length; i++) { if (formElems[i].type == 'checkbox') { formElems[i].disabled = false; } } } 
  

avec jquery:

 $(':checkbox[readonly]').click(function(){ return false; }); 

Ce pourrait être une bonne idée de donner un indice visuel (css, text, …), que le contrôle n’acceptera pas les entrées.

J’ai utilisé ceci pour atteindre les résultats:

  

J’ai remarqué la solution donnée ci-dessous. In a trouvé ma recherche pour le même problème. Je ne savais pas qui l’avait posté mais ce n’était pas fait par moi. Il utilise jQuery:

 $(document).ready(function() { $(":checkbox").bind("click", false); }); 

Cela rendrait les cases à cocher en lecture seule, ce qui serait utile pour afficher les données en lecture seule au client.

 onclick="javascript: return false;" 
  

fonctionnera pour vous, j’utilise ceci

Certaines des réponses ici semblent un peu détournées, mais voici un petit hack.

 

alors en jquery vous pouvez choisir l’une des deux options suivantes:

 $(document).ready(function(){ //first option, you don't need the disabled atsortingbute, this will prevent //the user from changing the checkbox values $("input[name^='chkBox_1']").click(function(e){ e.preventDefault(); }); //second option, keep the disabled atsortingbute, and disable it upon submit $("#submitBttn").click(function(){ $("input[name^='chkBox_1']").attr("disabled",false); $("#aform").submit(); }); }); 

démo: http://jsfiddle.net/5WFYt/

Sur la base des réponses ci-dessus, si vous utilisez jQuery, cela peut être une bonne solution pour toutes les entrées:

  

Je l’utilise avec Asp.Net MVC pour définir certains éléments de formulaire en lecture seule. Le ci-dessus fonctionne pour le texte et les cases à cocher en définissant un conteneur parent comme .readonly, comme dans les scénarios suivants:

 
   

J’aurais commenté la réponse de ConroyP, mais cela nécessite 50 points de réputation que je n’ai pas. J’ai assez de réputation pour poster une autre réponse. Pardon.

Le problème avec la réponse de ConroyP est que la case à cocher est rendue inchangeable en ne l’incluant même pas sur la page. Bien qu’Electrons_Ahoy n’en stipule pas autant, la meilleure réponse serait celle dans laquelle la case à cocher immuable serait similaire, sinon la case à cocher modifiable, comme c’est le cas lorsque l’atsortingbut “disabled” est appliqué. Une solution qui résout les deux raisons données par Electrons_Ahoy pour ne pas vouloir utiliser l’atsortingbut “disabled” ne serait pas nécessairement invalide car elle utilise l’atsortingbut “disabled”.

Supposons deux variables booléennes, $ checked et $ disabled:

 if ($checked && $disabled) echo ''; echo ''; 

La case à cocher est affichée si cochée si $ coché est vrai. La case à cocher est affichée comme non cochée si $ checked est faux. L’utilisateur peut modifier l’état de la case à cocher si et seulement si $ disabled est faux. Le paramètre “my_name” n’est pas publié lorsque la case à cocher est décochée, par l’utilisateur ou non. Le paramètre “my_name = 1” est publié lorsque la case à cocher est cochée, par l’utilisateur ou non. Je crois que c’est ce que recherchait Electrons_Ahoy.

Je sais que “désactivé” n’est pas une réponse acceptable, puisque l’op veut le publier. Cependant, vous devrez toujours valider les valeurs du côté serveur EVEN si vous avez l’option readonly définie. En effet, vous ne pouvez pas empêcher un utilisateur malveillant de publier des valeurs en utilisant l’atsortingbut readonly.

Je suggère de stocker la valeur d’origine (côté serveur) et de la définir sur désactivé. Ensuite, lorsqu’ils soumettent le formulaire, ignorez les valeurs affichées et prenez les valeurs d’origine que vous avez stockées.

Il va regarder et se comporter comme si c’était une valeur en lecture seule. Et il gère (ignore) les messages des utilisateurs malveillants. Vous tuez deux oiseaux avec une pierre.

une autre idée consiste à utiliser une superposition et à couvrir vos entrées en lecture seule

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

La principale raison pour laquelle les gens aimeraient une case à cocher en lecture seule et (ainsi) un groupe de radio en lecture seule est que les informations qui ne peuvent pas être modifiées peuvent être présentées à l’utilisateur sous la forme dans laquelle il a été saisi.

OK désactivé fera cela – malheureusement, les commandes désactivées ne sont pas navigables sur le clavier et tombent donc sous le coup de toutes les lois d’accessibilité. C’est le plus gros raccrochage en HTML que je connaisse.

Consortingbuer très très tard … mais de toute façon. Sur le chargement de la page, utilisez jquery pour désactiver toutes les cases à cocher à l’exception de celle actuellement sélectionnée. Ensuite, définissez le fichier actuellement sélectionné en lecture seule pour qu’il ressemble à ceux désactivés. L’utilisateur ne peut pas modifier la valeur et la valeur sélectionnée rest soumise.

Je ne veux tout simplement pas que le client puisse les changer dans certaines circonstances.

READONLY lui-même ne fonctionnera pas. Vous pouvez peut-être faire quelque chose de génial avec CSS, mais nous ne faisons que les désactiver.

AVERTISSEMENT: si elles sont postées, le client peut les modifier, période. Vous ne pouvez pas compter sur readonly pour empêcher un utilisateur de changer quelque chose. Le pourrait toujours utiliser fiddler ou juste chane le HTML w / firebug ou quelque chose du genre.

Ma solution est en fait l’opposé de la solution de FlySwat, mais je ne suis pas sûr que cela fonctionne pour votre situation. J’ai un groupe de cases à cocher et chacun possède un gestionnaire onClick qui soumet le formulaire (ils sont utilisés pour modifier les parameters de filtrage d’une table). Je ne veux pas autoriser plusieurs clics, car les clics suivants après le premier sont ignorés. Donc, je désactive toutes les cases à cocher après le premier clic et après avoir soumis le formulaire:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

Les cases à cocher se trouvent dans un élément span avec un identifiant “filters” – la deuxième partie du code est une instruction jQuery qui parcourt les cases à cocher et les désactive chacune. De cette manière, les valeurs de la case à cocher sont toujours soumises via le formulaire (car le formulaire a été soumis avant de les désactiver), et cela empêche l’utilisateur de les modifier jusqu’à ce que la page se recharge.

Lors de la publication d’une case à cocher HTML sur le serveur, celle-ci a pour valeur ‘on’ ou ”.

Readonly n’empêche pas l’utilisateur de modifier la case à cocher et désactivé la valeur renvoyée.
Un moyen de contourner ce problème consiste à avoir un élément caché pour stocker la valeur réelle et la case à cocher affichée est un mannequin désactivé. De cette façon, l’état de la case à cocher est conservé entre les messages.

Voici une fonction pour faire cela. Il utilise une chaîne de “T” ou de “F” et vous pouvez changer cela comme vous le souhaitez. Cela a été utilisé dans une page ASP en utilisant un script VB côté serveur.

 public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF) dim strThisCheckedValue if (i_strChecked_TorF = "T") then strThisCheckedValue = " checked " i_strChecked_TorF = "on" else strThisCheckedValue = "" i_strChecked_TorF = "" end if MakeDummyReadonlyCheckbox = "" & _ "" end function public function GetCheckbox(i_objCheckbox) select case sortingm(i_objCheckbox) case "" GetCheckbox = "F" case else GetCheckbox = "T" end select end function 

En haut d’une page ASP, vous pouvez récupérer la valeur persistante …

 strDataValue = GetCheckbox(Request.Form("chkTest")) 

et quand vous voulez sortir votre case à cocher, vous pouvez le faire …

 response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue) 

J’ai testé cela et ça marche très bien. Il ne repose pas non plus sur JavaScript.

Lors de la soumission du formulaire, nous transmettons la valeur de la case à cocher, et non l’état (coché / non coché). L’atsortingbut Readonly nous empêche de modifier la valeur, mais pas l’état. Si vous voulez avoir un champ en lecture seule qui représente la valeur que vous souhaitez soumettre, utilisez le texte en lecture seule.

Si vous souhaitez que la case à cocher soit soumise avec le formulaire mais en lecture seule à l’utilisateur, je vous recommande de la désactiver et d’utiliser JavaScript pour la réactiver lorsque le formulaire est envoyé.

C’est pour deux raisons. Avant tout, vos utilisateurs bénéficient d’une différence visible entre les cases à cocher qu’ils peuvent modifier et les cases à cocher en lecture seule. Désactivé le fait.

La deuxième raison est que l’état désactivé est intégré au navigateur. Vous avez donc besoin de moins de code à exécuter lorsque l’utilisateur clique sur quelque chose. C’est probablement plus une préférence personnelle que toute autre chose. Vous aurez toujours besoin de javascript pour les désactiver lors de la soumission du formulaire.

Il me semble plus facile d’utiliser du javascript lorsque le formulaire est soumis pour désactiver les cases à cocher plutôt que d’utiliser une entrée masquée pour porter la valeur.

Si quelqu’un d’autre utilise MVC et un modèle d’éditeur, voici comment je contrôle l’affichage d’une propriété en lecture seule (j’utilise un atsortingbut personnalisé pour obtenir la valeur dans l’instruction if)

 @if (true) { @Html.HiddenFor(m => m) @(ViewData.Model ? Html.Raw("Yes") : Html.Raw("No")) } else { @Html.CheckBoxFor(m => m) } 
  

Très tard à la fête, mais j’ai trouvé une réponse pour MVC (5) J’ai désactivé le CheckBox et ajouté un HiddenFor AVANT la case à cocher, alors quand il écrit si trouve le champ Caché en premier et utilise cette valeur. Cela fonctionne.

  
@Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
@Html.HiddenFor(model => model.Carrier.Exists) @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" }) @Html.ValidationMessageFor(model => model.Carrier.Exists)

Le dernier Jquery a cette fonctionnalité

$ (“# txtname”). prop (‘readonly’, false);

Dans l’ancien HTML, vous pouvez utiliser

 text 

mais en fait, il n’est pas recommandé d’utiliser simplement le vieux HTML, maintenant vous devriez utiliser XHTML.

Dans XHTML bien formé, vous devez utiliser

 text  text  

XHTML bien formé nécessite un formulaire XML, c’est la raison d’utiliser disabled = “disabled” au lieu de simplement utiliser disabled.