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 était (pour ainsi dire), définir l'attribut readonly ne semble en réalité rien faire.
Je préfère ne pas utiliser Désactivé, car je souhaite que les cases à cocher cochées soient soumises avec le reste du formulaire. Je ne souhaite tout simplement pas que le client puisse les modifier dans certaines circonstances.
vous pouvez utiliser ceci:
<input type="checkbox" onclick="return false;"/>
Cela fonctionne car le retour de false à l'événement click empêche la chaîne d'exécution de continuer.
READONLY ne fonctionne pas avec les cases à cocher car cela vous empêche de modifier le value d'un champ, mais avec une case à cocher, vous éditez réellement le state 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 (ce qui permet de définir l'état CHECKED), mais vous ne modifiez pas la valeur du champ.
Si vous ne souhaitez pas utiliser disabled mais souhaitez toujours soumettre la valeur, pourquoi ne pas soumettre la valeur sous forme de champ masqué et simplement imprimer 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';
}
Ceci est une case à cocher que vous ne pouvez pas changer:
<input type="checkbox" disabled="disabled" checked="checked">
Ajoutez simplement disabled="disabled" en tant qu'attribut.
Modifier pour répondre aux commentaires:
Si vous souhaitez que les données soient renvoyé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"/>
Ainsi, lorsque la case à cocher est désactivée, elle ne sert que de représentation visuelle des données, au lieu d'être «liée» aux données. Dans le post 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" />
disabled = "disabled"/disabled = true
Cela pose un problème d’utilisabilité.
Si vous souhaitez afficher une case à cocher, mais que vous ne l'utilisiez pas, pourquoi même une case à cocher alors?
Cependant, mon approche consisterait à utiliser désactivé (l'utilisateur s'attend à ce qu'une case à cocher désactivée ne soit pas éditable, au lieu d'utiliser JS pour en désactiver une non activée) et à ajouter un gestionnaire de soumission de formulaire à l'aide de javascript qui active les cases à cocher juste avant soumis. De cette façon, vous obtenez vos valeurs affichées.
c'est-à-dire quelque chose comme ceci:
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;
});
il peut être utile de donner un indice visuel (CSS, texte, ...), que le contrôle n'acceptera pas les entrées.
J'ai utilisé cela pour atteindre les résultats:
<input type=checkbox onclick="return false;" onkeydown="return false;" />
Il m'est arrivé de remarquer la solution donnée ci-dessous. Je l'ai trouvée dans mes recherches pour le même problème. Je ne sais pas qui l'avait posté mais ce n'est pas moi qui l'ai faite. Il utilise jQuery:
$(document).ready(function() {
$(":checkbox").bind("click", false);
});
Cela rendrait les cases à cocher en lecture seule, ce qui serait utile pour afficher des données en lecture seule au client.
onclick="javascript: return false;"
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
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 suivantes:
$(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();
});
});
Le plus grand centre commercial
<input type="checkbox" onclick="return false" /> fonctionnera pour vous, je l'utilise
En vous appuyant sur les réponses ci-dessus, si vous utilisez jQuery, cela peut être une bonne solution pour tous les intrants:
<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 cela 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 un 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" >
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 non modifiable en ne l'incluant même pas sur la page. Bien que Electrons_Ahoy n'en stipule pas autant, la meilleure réponse serait que la case à cocher non modifiable ressemblerait, sinon identique, à la case à cocher modifiable, comme c'est le cas lorsque l'attribut "désactivé" est appliqué. Une solution qui aborde les deux raisons invoquées par Electrons_Ahoy pour ne pas vouloir utiliser l'attribut "désactivé" serait non ne serait pas nécessairement invalide car elle utilisait 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 est cochée si $ check est vrai. La case à cocher est cochée si $ coché est faux. L'utilisateur peut modifier l'état de la case à cocher si et seulement si $ disabled est false. Le paramètre "mon_nom" n'est pas publié lorsque la case à cocher est désélectionnée, par l'utilisateur ou non. Le paramètre "mon_nom = 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 "handicapé" n’est pas une réponse acceptable, car l’opérateur veut le poster. Cependant, vous devrez toujours valider les valeurs côté serveur même si vous avez défini l'option en lecture seule. En effet, vous ne pouvez pas empêcher un utilisateur malveillant de publier des valeurs à l'aide de l'attribut readonly.
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.
Cela ressemblera à une valeur en lecture seule. Et il gère (ignore) les publications d'utilisateurs malveillants. Vous tuez 2 oiseaux avec une pierre.
Utilisez simplement une balise désactivée comme celle ci-dessous.
<input type="checkbox" name="email" disabled>
Si vous voulez qu'ils soient soumis au serveur avec le formulaire mais ne soyez pas interactifs pour l'utilisateur, vous pouvez utiliser pointer-events: none dans css ( fonctionne dans tous les navigateurs modernes, sauf IE10- et Opera 12- ) et définir tab-index à -1 pour empêcher la modification via le clavier. Notez également que vous ne pouvez pas utiliser la balise label car un clic dessus modifiera 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>Si vous souhaitez que TOUTES vos cases à cocher soient "verrouillées" afin que l'utilisateur ne puisse pas modifier l'état "vérifié" si l'attibut "en lecture seule" est présent, vous pouvez utiliser jQuery:
$(':checkbox').click(function () {
if (typeof ($(this).attr('readonly')) != "undefined") {
return false;
}
});
La chose intéressante à propos de ce code est qu’il vous permet de changer l’attribut "readonly" partout dans votre code sans avoir à relier toutes les cases à cocher.
Cela fonctionne aussi pour les boutons radio.
une autre idée consiste à utiliser une superposition et à masquer vos entrées readonly
http://pure-essence.net/2011/09/22/jquery-read-only-elements/
Réponse tardive, mais la plupart des réponses semblent trop compliquer les choses.
Si je comprends bien, le PO manquait à la base:
- Case à cocher en lecture seule pour afficher l'état.
- Valeur renvoyée avec formulaire.
Il convient de noter que:
- L'OP a préféré ne pas utiliser l'attribut
disabled, car il "souhaite que les cases à cocher cochées soient soumises avec le reste du formulaire". - Les cases à cocher non cochées ne sont pas soumises avec le formulaire, car la citation de l'OP 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.
- Une case à cocher désactivée indique clairement qu'il ne peut pas être modifié, de par sa conception, de sorte qu'il est peu probable qu'un utilisateur tente de le modifier.
- La valeur d'une case à cocher n'est pas limitée à indiquer son statut, tel que
yesoufalse, mais peut être n'importe quel texte.
Par conséquent, l'attribut readonly ne fonctionnant pas, la meilleure solution, sans javascript, est la suivante:
- Une case à cocher désactivée, sans nom ni valeur.
- Si la case à cocher doit être affichée comme étant cochée, un champ masqué avec le nom et la valeur stockés sur le serveur.
Donc, pour une case à cocher 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 des entrées désactivées, en particulier des cases à cocher, est leur faible contraste qui peut poser problème à certaines personnes présentant certains handicaps visuels. Il peut être préférable d'indiquer une valeur par des mots simples, tels que Status: none ou Status: implemented, mais en incluant l'entrée masquée ci-dessus lorsque cette dernière est utilisée, telle que:
<input type="hidden" name="status" value="implemented" />Non, les cases à cocher ne peuvent pas être en lecture seule.
Mais vous pouvez les rendre en lecture seule avec javascript!
Ajoutez ce code n'importe où et à tout moment pour que les cases à cocher en lecture seule fonctionnent 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 sélectionnant l'événement click (qui se produit avant l'événement change) sur n'importe quel élément de la page, puis vérifie si cet élément est une case à cocher en lecture seule et, le cas échéant, il bloque le changement.
Il y a tellement de cas pour que cela n'affecte pas les performances de la page.
Contribuer très très tard ... mais quand même. Lors du chargement de la page, utilisez jQuery pour désactiver toutes les cases à cocher sauf celle actuellement sélectionnée. Ensuite, définissez celui qui est actuellement sélectionné en lecture seule afin de lui donner une apparence similaire à celle des personnes désactivées. L'utilisateur ne peut pas modifier la valeur et la valeur sélectionnée est toujours soumise.
La raison principale pour laquelle les utilisateurs souhaitent une case à cocher en lecture seule et (également) un groupe radio en lecture seule est de manière à ce 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 disabled le fera. Malheureusement, les commandes désactivées ne sont pas accessibles au clavier et sont donc incompatibles avec toutes les lois en matière d'accessibilité. C'est le plus gros blocage HTML que je connaisse.
Lors de la publication d'une case à cocher HTML sur le serveur, la valeur de chaîne est 'on' ou ''.
Readonly n'empêche pas l'utilisateur de modifier la case à cocher, et disabled empêche la publication de la valeur.
Une solution 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 publications.
Voici une fonction pour le faire. Il utilise une chaîne de caractères 'T' ou 'F' et vous pouvez le modifier comme vous le souhaitez. Cela a été utilisé dans une page ASP à l'aide du script côté serveur VB.
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 = "<input type='hidden' id='" & i_strName & "' name='" & i_strName & "' " & _
"value='" & i_strChecked_TorF & "'>" & _
"<input type='checkbox' disabled id='" & i_strName & "Dummy' name='" & i_strName & "Dummy' " & _
strThisCheckedValue & ">"
end function
public function GetCheckbox(i_objCheckbox)
select case trim(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 cela fonctionne très bien. Il ne repose pas non plus sur JavaScript.
Très tard pour le parti mais j'ai trouvé une réponse pour MVC (5) J'ai désactivé le CheckBox et ajouté un HiddenFor AVANT la case à cocher, donc quand il poste si trouve le champ caché 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 readonly
<input type="checkbox" readonly>
Ensuite, utilisez 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;
}
Si vous avez besoin que la case à cocher soit soumise avec le formulaire mais en lecture seule pour l'utilisateur, je vous recommande de les définir sur désactivé et d'utiliser javascript pour les réactiver lors de l'envoi du formulaire.
C'est pour deux raisons. Tout d’abord et surtout, vos utilisateurs tirent parti d’une différence visible entre les cases à cocher qu’ils peuvent modifier et les cases à cocher en lecture seule. Disabled fait ceci.
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 qu'autre chose. Vous aurez encore 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ésélectionner les cases à cocher que d’utiliser une entrée masquée pour porter la valeur.
Ma solution est en réalité l'opposé de la solution de FlySwat, mais je ne suis pas sûr que cela fonctionne dans votre cas. J'ai un groupe de cases à cocher, et chacune a un gestionnaire onClick qui soumet le formulaire (elles sont utilisées pour modifier les paramètres de filtre d'une table). Je ne souhaite pas autoriser plusieurs clics, car les clics suivants sont ignorés. Je désactive donc toutes les cases à cocher après le premier clic et après la soumission du formulaire:
onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"
Les cases à cocher sont dans un élément span avec un identifiant de "filtres" - la deuxième partie du code est une instruction jQuery qui parcourt les cases à cocher et les désactive. De cette façon, les valeurs des cases à cocher sont toujours soumises via le formulaire (car le formulaire a été soumis avant leur désactivation), ce qui empêche l'utilisateur de les modifier jusqu'à ce que la page soit rechargée.
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 postés, le client peut les modifier, point à la ligne. Vous ne pouvez pas vous fier à la lecture seule pour empêcher un utilisateur de modifier quelque chose. Le pourrait toujours utiliser un violoniste ou juste chane le html w/firebug ou quelque chose comme ça.
Lors de la soumission du formulaire, nous passons la valeur de la case à cocher, pas l'état (cochée/décochée). L'attribut Readonly nous empêche de modifier la valeur, mais pas l'état. Si vous souhaitez avoir un champ en lecture seule qui représentera la valeur que vous souhaitez soumettre, utilisez le texte en lecture seule.
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 attribut 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)
}
<input name="testName" type="checkbox" disabled>