Question 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) la définition de l'attribut readonly ne semble pas vraiment faire quoi que ce soit.

Je préfère ne pas utiliser désactivé, puisque je veux que les cases à cocher soient soumises avec le reste du formulaire, je ne veux pas que le client puisse les changer dans certaines circonstances.


681
2017-09-30 21:58


origine


Réponses:


vous pouvez utiliser ceci:

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

Cela fonctionne car renvoyer false de l'événement click arrête la chaîne d'exécution en cours.


427



READONLY ne fonctionne pas sur les cases à cocher car il vous empêche d'éditer un champ valeur, mais avec une case à cocher vous êtes en train d'éditer le champ de Etat (on || off)

De faqs.org:

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

Si vous ne voulez pas utiliser disabled mais voulez toujours soumettre la valeur, que diriez-vous de soumettre la valeur comme champ caché et simplement imprimer son contenu à l'utilisateur quand ils ne rencontrent pas les critères d'édition? 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';
}

379



C'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 voulez que les données soient postées, une solution simple consiste à appliquer le même nom à une entrée caché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ésactivée, elle sert uniquement à représenter visuellement les données, au lieu d'être réellement liée 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.


282



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


60



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é = true


49



Cela présente un peu un problème d'utilisabilité.

Si vous voulez afficher une case à cocher, mais ne laissez pas interagir avec, pourquoi même une case à cocher?

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 faire fonctionner une fonction activée), et d'ajouter un gestionnaire de soumission de formulaire utilisant javascript qui active les 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;
       }
    }
}

44



<input type="checkbox" readonly="readonly" name="..." />

avec jquery:

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

cela peut être une bonne idée de donner un indice visuel (css, texte, ...), que le contrôle n'accepte pas les entrées.


30



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

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

16



J'ai remarqué la solution donnée ci-dessous. En ai trouvé mes recherches pour le même problème. Je ne l'ai pas 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 montrer des données en lecture seule au client.


12