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

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.

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.

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

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.

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

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

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

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

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

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

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.

onclick="javascript: return false;"

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>

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.

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

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>

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

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/

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>

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

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.

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.

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.

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

<input type="checkbox" name="email"  disabled>

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

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

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.

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.

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.

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>

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

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.

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.