Les cases à cocher HTML peuvent-elles être définies en lecture seule?

818

Je pensais qu'ils pourraient l'être, mais comme je ne mets pas mon argent là où ma bouche (pour ainsi dire) définir l'attribut en lecture seule ne semble en fait rien faire.

Je préfère ne pas utiliser Désactivé, car je veux que les cases cochées soient soumises avec le reste du formulaire, je ne veux tout simplement pas que le client puisse les modifier dans certaines circonstances.

Electrons_Ahoy
la source
39
Un client (malveillant) peut toujours modifier la valeur d'une case à cocher (ou envoyer des demandes arbitraires). Assurez-vous toujours de faire une validation côté serveur appropriée!
knittl
4
@knittl Mais un vistor normal n'a pas de client (malveillant). Et un Vistor normal ne voulait pas changer une information (c'est le sens de readonly)
Christian Gollhardt
3
@knittl Vous semblez rejeter tout le sens de readonly! Pourquoi alors cet attribut existerait!
Izhar Aazmi
10
@IzharAazmi: readonlyn'est qu'un attribut côté client pour aider un navigateur à restituer correctement un site, puis à en construire la requête correcte. Le serveur ne peut pas et ne doit pas connaître l' readonlyattribut de la page rendue. Il doit supposer que la demande est venue de n'importe où (et peut-être avec des intentions malveillantes); ne comptez jamais sur les entrées fournies par l'utilisateur. Pourquoi envoyer une valeur de case à cocher que vous ne pouvez pas modifier dans une demande (si vous définissez la valeur avant le rendu, vous connaissez déjà la valeur lorsque la demande est soumise, il n'est donc pas nécessaire de la transmettre dans la demande)
knittl
4
@knittl Je suis d'accord! Mais vous voyez que l' readonlyattribut existe là pour une raison quelconque. Cela n'a certainement rien à voir avec l'implémentation côté serveur. Mais il est là pour dire à l'utilisateur "Hé! Cette valeur est supposée ici, et / mais vous ne pouvez pas la changer."
Izhar Aazmi

Réponses:

539

vous pouvez utiliser ceci:

<input type="checkbox" onclick="return false;"/>

Cela fonctionne parce que renvoyer false à partir de l'événement click arrête la chaîne d'exécution de continuer.

Yanni
la source
29
Renvoyer false en javascript empêche de continuer la chaîne d'exécution pour le gestionnaire de clics ou de clés. N'a rien à voir avec l'état de la case à cocher
Jessica Brown
9
PS ... si vous voulez que la case à cocher soit dans l'état coché que vous devez ajouter checked="checked", ne jouez pas avec le javascript. Le javascript est juste là pour forcer les clics de souris à être ignorés sur l'objet d'entrée, pas pour définir l'état de la case à cocher.
Jessica Brown
8
Aucune indication visuelle du statut de r / o dans ce cas.
Jesse Glick
11
Empêche cependant d'utiliser TAB pour accéder à l'entrée suivante.
user327961
7
Échoue complètement si javascript est désactivé!
Doin
420

READONLYne fonctionne pas sur les cases à cocher car il 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 VÉRIFIÉ) mais vous ne modifiez pas la valeur du champ.

Si vous ne souhaitez pas utiliser disabledmais souhaitez toujours soumettre la valeur, que diriez-vous de soumettre la valeur en tant que champ masqué et d'imprimer simplement son contenu à l'utilisateur lorsqu'il ne répond pas aux critères de modification? par exemple

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}
ConroyP
la source
135
Fonctionne, mais c'est un peu ... bien sale, les cases à cocher en lecture seule devraient simplement faire ce que l'intuition dit.
levhita
8
L'intuition nous trompe, comme l'explique ConroyP.
ANeves
120
L'intuition ne nous trompe pas, elle a trompé ceux qui ont implémenté la case à cocher de cette façon.
Tarif
@ConroyP -> "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)". C'est une justification vraiment faible pour une décision audacieuse. Pour la plupart d'entre nous, «l'état» et la «valeur» sont à peu près les mêmes que «toMAYto» et «toMAHto», comme vous pouvez le constater grâce aux votes positifs des personnes qui ne sont pas d'accord.
McAuley
343

Il s'agit d'une case à cocher que vous ne pouvez pas modifier:

<input type="checkbox" disabled="disabled" checked="checked">

Ajoutez simplement disabled="disabled"un attribut.


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:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

De cette façon, lorsque la case à cocher est définie sur «désactivée», elle ne sert qu'à la représentation visuelle des données, au lieu d'être réellement «liée» aux données. Dans le post de retour, la valeur de l'entrée masquée est envoyée lorsque la case à cocher est désactivée.

Silvermind
la source
331
Notez que la case "désactivé" n'envoie pas de valeur via les données POST.
biphobe
66
@powtac Vous ne répondez pas qu'il souhaite que les données soient publiées, votre exemple ne le fait pas.
David Mårtensson
70
Il est impossible que cette réponse contienne 105 votes positifs. Cela va à l'encontre de tout ce que déclare le PO.
JM4
15
@nathanhayfield: selon cette logique, je devrais être en mesure de poster des réponses utiles sur n'importe quel sujet et d'obtenir des votes positifs. :(
Michael Bray
24
@ MichaelBray Je suppose que cela obtient beaucoup de votes positifs parce que beaucoup de gens veulent savoir comment faire des cases à cocher en lecture seule, alors ils le font: 1) Google "Checkbox en lecture seule". 2) Vérifiez que le titre de cette question correspond à ce qu'ils veulent faire et cliquez dessus. 3) Faites défiler vers le bas jusqu'à ce qu'ils trouvent cette réponse. 4) Bonheur et vote positif.
Mark Byers
63
<input type="checkbox" onclick="this.checked=!this.checked;">

Mais vous DEVEZ absolument valider les données sur le serveur pour vous assurer qu'elles n'ont pas été modifiées.

Grant Wagner
la source
4
J'ai trouvé que c'était la meilleure solution; De plus, je peux appeler un autre morceau de code (par exemple, quelques trucs jquery) pour afficher un joli petit signe qui dit "vous ne pouvez pas changer cela avant d'avoir fait x". Donc quelque chose comme: "... onclick = 'this.checked =! This.checked; javascript: theCheckboxWasClicked ();' ..."
Bane
Cela ne grise pas les cases comme avec la réponse de powtac donc j'ai obtenu mon vote
EHarpham
C'est un peu hackish, mais c'est un petit hack ingénieux, parfait, presque élégant.
Russell
Meilleure solution. Doit être marqué comme la bonne réponse.
Scottie
3
Comme indiqué ci-dessus, cela ne fonctionne pas sur le double-clic dans IE. J'ai utilisé: onchange = "this.checked = true;"
Ritikesh
57

une autre "solution simple":

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

désactivé = "désactivé" / désactivé = vrai

invocation
la source
1
Cela résout tous les problèmes: crée une case à cocher en lecture seule, soumet des données POST et fournit une indication visuelle de la lecture seule (contrairement à toutes les solutions javascript)
Dalibor Frivaldsky
2
vous pouvez également déposer nameet les valueattributs de votre boîte factice, ="checked"ainsi que les ="diabled"valeurs d' attribut peuvent être supprimées. w3.org/TR/html-markup/input.checkbox.html
Sampo Sarrala - codidact.org
Plus important encore, cette solution est du vieux HTML et ne repose pas sur Javascript.
GlennG
45

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

Si vous souhaitez afficher une case à cocher, mais ne pas l'interagir, pourquoi même une case à cocher alors?

Cependant, mon approche serait d'utiliser désactivé (L'utilisateur s'attend à ce qu'une case désactivée ne soit pas modifiable, au lieu d'utiliser JS pour que celle activée ne fonctionne pas), et ajouter un gestionnaire de soumission de formulaire à l'aide de javascript qui active les cases à cocher juste avant que le formulaire ne soit 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;
       }
    }
}
FlySwat
la source
22
Une autre option consiste à afficher la case à cocher désactivée (ou une image ou quoi que ce soit pour indiquer cochée / décochée) et d'avoir une entrée cachée qui est ce qui est traité par le serveur.
Juan Mendes
5
Ce n'est pas un problème de convivialité lorsque vous avez un formulaire dans lequel une partie de votre décision affecte d'autres entrées (alias: définir une valeur qui ne peut pas être touchée si vous n'annulez pas votre première action.). Je déteste quand les gens essaient de changer d'avis au lieu de répondre (il ne s'agit pas de vous @FlySwat, vous avez répondu).
Pherrymason
7
Le but est d'utiliser une case à cocher comme champ d'affichage "cette valeur est vraie", ce qui est plus facile à parcourir une table qu'un tas de "vrai" / "faux" -s. Bien sûr, vous pouvez utiliser une icône mais, dans un formulaire, les cases à cocher semblent là, prêtes à être utilisées.
Olie
1
J'utilise généralement cette solution mais .. parfois les utilisateurs, en particulier sur une connexion lente, voient les boutons d'entrée activés après la soumission du formulaire et décident de jouer avec.
systempuntoout
2
Supposons que vous ayez une série de "fonctionnalités" qui peuvent être incluses ou non, donc vous avez un modèle qui affiche une case à cocher sur la fonctionnalité. Mais parfois, une fonctionnalité est une condition préalable à autre chose ... donc elle DOIT être incluse, mais vous ne voulez pas changer votre modèle. C'est exactement à cela que sert une case désactivée / cochée. Ils existent depuis toujours, alors j'espère que la question «pourquoi même une case à cocher» était rhétorique.
Triynko
38
<input type="checkbox" readonly="readonly" name="..." />

avec jquery:

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

ce serait quand même une bonne idée de donner un indice visuel (css, texte, ...), que le contrôle n'acceptera pas les entrées.

janv.
la source
Cela n'a pas fonctionné dans ie6 pour moi, le filtre d'attribut en lecture seule ne fonctionne pas correctement. J'ai retiré cela du filtre et mis la vérification des attributs dans le corps de la fonction et cela fonctionne bien dans ie6.
gt124
3
J'ai utilisé "data-readonly = true" au lieu de l'attribut standard et cela fonctionne très bien dans tous les navigateurs. J'aime cette solution plus que les autres ci-dessus +1
peipst9lker
1
Le sélecteur doit être $(':checkbox[readonly]')de sélectionner toutes les cases à cocher candidates car la readonlyvaleur d'attribut est facultative.
Izhar Aazmi
21

Je l'ai utilisé pour obtenir les résultats:

<input type=checkbox onclick="return false;" onkeydown="return false;" />
Osama Javed
la source
Dans mon cas, cela fonctionne sans point-virgule, sinon ce n'est pas le cas.
Mwiza
12

J'ai remarqué la solution donnée ci-dessous. En trouvé mes recherches pour le même numéro. Je ne sais pas qui l'a posté mais il n'a pas été 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.

Gotham's Reckoning
la source
1
La question demande une case à cocher en lecture seule et non pas désactivée. C'est donc la réponse la plus correcte.
NileshChauhan
9
onclick="javascript: return false;"
Sandman
la source
Hmmm ... cela fonctionne pour le cas faux / non vérifié, mais le onclick="javascript: return true;"fait simplement agir comme une case à cocher normale. Conseils? Merci!
Olie
@Olie, ajoutez un checkedattribut et restez falseen place.
Qwertiy
7

Réponse tardive, mais la plupart des réponses semblent trop compliquer les choses.

Si je comprends bien, le PO voulait essentiellement:

  1. Case à cocher en lecture seule pour afficher l'état.
  2. Valeur retournée avec le formulaire.

Il convient de noter que:

  1. L'OP a préféré ne pas utiliser l' disabledattribut, car il «souhaite que les cases cochées soient soumises avec le reste du formulaire».
  2. Les cases à cocher non cochées ne sont pas soumises avec le formulaire, car la citation du PO en 1. ci-dessus indique qu'ils le savaient déjà. Fondamentalement, la valeur de la case à cocher n'existe que si elle est cochée.
  3. Une case à cocher désactivée indique clairement qu'elle ne peut pas être modifiée, de par sa conception, il est donc peu probable qu'un utilisateur tente de la modifier.
  4. La valeur d'une case à cocher ne se limite pas à indiquer son état, comme yesou false, mais peut être n'importe quel texte.

Par conséquent, puisque l' readonlyattribut ne fonctionne pas, la meilleure solution, ne nécessitant pas de javascript, est:

  1. Une case à cocher désactivée, sans nom ni valeur.
  2. Si la case doit être affichée comme cochée, un champ masqué avec le nom et la valeur tels qu'ils sont stockés sur le serveur.

Donc, pour une case cochée:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

Pour une case à cocher non cochée:

<input type="checkbox" disabled="disabled" />

Le principal problème avec les entrées désactivées, en particulier les cases à cocher, est leur faible contraste qui peut être un problème pour certains avec certains handicaps visuels. Il peut être préférable d'indiquer une valeur par des mots simples, tels que Status: noneou Status: implemented, mais en incluant l'entrée masquée ci-dessus lorsque celle-ci est utilisée, comme:

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

Patanjali
la source
7

La plupart des réponses actuelles ont un ou plusieurs de ces problèmes:

  1. Vérifiez uniquement la souris et non le clavier.
  2. Vérifier uniquement au chargement de la page.
  3. Accrochez le changement toujours populaire ou soumettez des événements qui ne fonctionneront pas toujours si quelque chose d'autre les a accrochés.
  4. Exiger une entrée cachée ou d'autres éléments / attributs spéciaux que vous devez annuler afin de réactiver la case à cocher en utilisant javascript.

Ce qui suit est simple et ne présente aucun de ces problèmes.

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

Si la case à cocher est en lecture seule, elle ne changera pas. Si ce n'est pas le cas, ce sera le cas. Il utilise jquery, mais vous l'utilisez probablement déjà ...

Ça marche.

little_birdie
la source
6
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
pollodiablo
la source
6

Si vous souhaitez qu'ils soient soumis au serveur avec un formulaire mais ne soient pas interactifs pour l'utilisateur, vous pouvez les utiliser pointer-events: nonedans css ( fonctionne dans tous les navigateurs modernes sauf IE10 et Opera 12 ) et définir tab-index  -1pour empêcher toute modification via le clavier. Notez également que vous ne pouvez pas utiliser de labelbalise car cliquer dessus changera de toute façon l'état.

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}
<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>

Qwertiy
la source
Permettez-moi de répéter votre dernière phrase (je l'ai manquée et j'ai perdu un temps précieux): votre technique est inutile s'il y a <label> (dans Firefox, cela fonctionne parfaitement, en fait. Le problème est avec Chrome).
Niccolo M.
@NiccoloM., Mais si vous savez qu'il est en lecture seule, pourquoi l'envelopper dans l'étiquette? Vous pouvez également mettre une étiquette après et utiliser l' forattribut. Dans ce cas, vous pouvez utiliser input[type="checkbox"][readonly] + label { pointer-events: none !important; }.
Qwertiy
@KevinBui, avez-vous supprimé labelet ajouté tabindex? Comment définissez-vous le focus sur un élément flou pour y appuyer un espace?
Qwertiy
5

<input type="checkbox" onclick="return false" /> fonctionnera pour vous, j'utilise ce

Rinto George
la source
5

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

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>

puis dans jquery vous pouvez choisir l'une des deux options:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

La

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

sksallaj
la source
3
Et ce n'est pas un "rond-point" ??
KoZm0kNoT
non c'est assez direct .. c'est juste pas concis.
sksallaj
4

En s'appuyant sur les réponses ci-dessus, si vous utilisez jQuery, cela peut être une bonne solution pour toutes les entrées:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

J'utilise ceci avec Asp.Net MVC pour définir certains éléments de formulaire en lecture seule. Ce qui précède fonctionne pour le texte et les cases à cocher en définissant tout conteneur parent comme .readonly, comme dans les scénarios suivants:

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>
Derrick
la source
4
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
frag
la source
4

Je sais que "désactivé" n'est pas une réponse acceptable, car l'op veut qu'il poste. Cependant, vous devrez toujours valider les valeurs côté serveur MÊME si l'option en lecture seule est définie. En effet, vous ne pouvez pas empêcher un utilisateur malveillant de publier des valeurs à l'aide de l'attribut en lecture seule.

Je suggère de stocker la valeur d'origine (côté serveur) et de la désactiver. Ensuite, lorsqu'ils soumettent le formulaire, ignorez toutes les valeurs publiées et prenez les valeurs d'origine que vous avez stockées.

Il ressemblera et se comportera comme une valeur en lecture seule. Et il gère (ignore) les publications d'utilisateurs malveillants. Vous tuez 2 oiseaux avec une pierre.

NL3294
la source
3

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. Désolé.

Le problème avec la réponse de ConroyP est que la case à cocher est rendue immuable en ne l'incluant même pas sur la page. Bien que Electrons_Ahoy ne le stipule pas autant, la meilleure réponse serait celle dans laquelle la case à cocher immuable serait similaire, sinon la même que la case à cocher modifiable, comme c'est le cas lorsque l'attribut "désactivé" est appliqué. Une solution qui répond aux deux raisons invoquées par Electrons_Ahoy pour ne pas vouloir utiliser l'attribut "désactivé" ne serait pas nécessairement invalide car elle a utilisé l'attribut "désactivé".

Supposons deux variables booléennes, $ vérifié et $ désactivé:

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

La case à cocher s'affiche comme cochée si $ vérifié est vrai. La case à cocher est affichée comme décochée si $ checké est faux. L'utilisateur peut modifier l'état de la case à cocher si et seulement si $ désactivé est faux. Le paramètre "mon_nom" n'est pas publié lorsque la case n'est pas cochée, par l'utilisateur ou non. Le paramètre "my_name = 1" est publié lorsque la case est cochée, par l'utilisateur ou non. Je crois que c'est ce que Electrons_Ahoy recherchait.

David N. Jafferian
la source
3

Non, les cases à cocher ne peuvent pas être lues uniquement.

Mais vous pouvez les faire en lecture seule avec javascript!

Ajoutez ce code n'importe où et à tout moment pour que les cases à cocher fonctionnent en lecture seule comme prévu, en empêchant l'utilisateur de le modifier de quelque manière que ce soit.

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});
input[type=checkbox][readonly] {
    cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

Vous pouvez ajouter ce script à tout moment après le chargement de jQuery.

Cela fonctionnera pour les éléments ajoutés dynamiquement.

Cela fonctionne en ramassant l'événement click (qui se produit avant l'événement change) sur n'importe quel élément de la page, il vérifie ensuite si cet élément est une case à cocher en lecture seule, et si c'est le cas, il bloque la modification.

Il y a tellement de ifs pour que cela n'affecte pas les performances de la page.

Timo Huovinen
la source
3

Utilisez simplement une balise désactivée simple comme celle ci-dessous.

<input type="checkbox" name="email"  disabled>
Nirbhay Rana
la source
6
"Balise désactivée" ne soumettra pas ces données
Przemysław Kaczmarczyk
2

Si vous voulez que TOUTES vos cases soient "verrouillées" pour que l'utilisateur ne puisse pas changer l'état "coché" si l'attribut "en lecture seule" est présent, alors vous pouvez utiliser jQuery:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

Ce qui est cool avec ce code, c'est qu'il vous permet de changer l'attribut "en lecture seule" sur tout votre code sans avoir à relier chaque case.

Cela fonctionne également pour les boutons radio.

Daniel Ribeiro
la source
1

La principale raison pour laquelle les gens souhaitent une case à cocher en lecture seule et (également) un groupe radio en lecture seule est pour que les informations qui ne peuvent pas être modifiées puissent être présentées à l'utilisateur sous la forme dans laquelle elles ont été entrées.

OK désactivé le fera - malheureusement, les commandes désactivées ne sont pas accessibles au clavier et tombent donc sous le coup de toutes les lois sur l'accessibilité. Ceci est le plus gros blocage en HTML que je connaisse.

Tim
la source
1

Contribuer très très tard ... mais de toute façon. Au chargement de la page, utilisez jquery pour désactiver toutes les cases à cocher sauf celle actuellement sélectionnée. Ensuite, définissez celui actuellement sélectionné en lecture seule afin qu'il ait un aspect similaire à ceux désactivés. L'utilisateur ne peut pas modifier la valeur et la valeur sélectionnée est toujours soumise.

Jason
la source
1

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

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>
bowlturner
la source
1

J'utiliserais l'attribut en lecture seule

<input type="checkbox" readonly>

Utilisez ensuite CSS pour désactiver les interactions:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

Notez que l'utilisation de la pseudo-classe: lecture seule ne fonctionne pas ici.

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}
gordie
la source
0

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 les désactivons généralement.

AVERTISSEMENT: S'ils sont affichés, le client peut les modifier, point final. Vous ne pouvez pas compter uniquement sur readon pour empêcher un utilisateur de changer quelque chose. Le pourrait toujours utiliser fiddler ou simplement chane le html w / firebug ou quelque chose comme ça.

Walden Leverich
la source
Vous avez tout à fait raison, c'est pourquoi je vérifie également que côté serveur, la configuration est juste pour améliorer l'expérience utilisateur côté client.
levhita
0

Ma solution est en fait l'opposé de la solution de FlySwat, mais je ne sais pas si cela fonctionnera pour votre situation. J'ai un groupe de cases à cocher et chacune a un gestionnaire onClick qui soumet le formulaire (ils sont utilisés pour modifier les paramètres de filtre pour une table). Je ne veux pas autoriser plusieurs clics, car les clics suivants après le premier sont ignorés. Je désactive donc 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 sont dans un élément span avec un ID de "filtres" - la deuxième partie du code est une instruction jQuery qui parcourt les cases à cocher et désactive chacune d'elles. De cette façon, les valeurs des cases à cocher sont toujours soumises via le formulaire (puisque 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.

sk.
la source