web-dev-qa-db-fra.com

Comment créer une case à cocher en lecture seule? pas désactivé?

J'ai un formulaire où je dois poster des valeurs de formulaire dans ma classe d'action. Dans cette forme, j'ai une case à cocher qui doit être en lecture seule. J'ai essayé de définir disabled="true", mais cela ne fonctionne pas lors de la publication dans la classe d'action. 

Alors s'il vous plaît des conseils ??

34
Naga

Vous pouvez facilement le faire en css .HTML:

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" readonly />
    <br/>
    <input name="chkBox_2" type="checkbox" value="1" readonly />
    <br/>
    <input id="submitBttn" type="button" value="Submit">
</form>

CSS:

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

Démo

13
AleX

Il n'y a pas de propriété pour faire la case à cocher en lecture seule. Mais vous pouvez essayer cette astuce.

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

D&EACUTE;MO

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

http://jsfiddle.net/2srjc/

Si vous êtes préoccupé par l'ordre de tabulation, renvoyez uniquement la valeur false pour l'événement keydown lorsque vous n'avez pas appuyé sur la touche de tabulation:

<input type="checkbox" checked onclick="return false;" onkeydown="e = e || window.event; if(e.keyCode !== 9) return false;"/>

http://jsfiddle.net/2srjc/149/

30
Patrick Lee Scott

Personnellement, j'aime bien le faire de cette façon:

<input type="checkbox" name="option" value="1" disabled="disabled" />
<input type="hidden" name="option" value="1">

Je pense que c'est mieux pour deux raisons:

  1. L'utilisateur comprend clairement qu'il ne peut pas éditer cette valeur
  2. La valeur est envoyée lors de la soumission du formulaire.
9
MRodrigues

Vous pouvez simplement ajouter onclick="return false" - cela empêchera le navigateur d'exécuter l'action par défaut (les cases cochées/non cochées ne seront pas modifiées)

7
Viktor S.

Créez une fausse case à cocher sans nom ni valeur, forcez la valeur dans un champ caché:

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

Note: si vous mettez le nom et la valeur dans la case à cocher, il sera quand même écrasé par l'entrée du même nom.

2
Luca C.

J'utilise JQuery pour pouvoir utiliser l'attribut readonly sur les cases à cocher. 

//This will make all read-only check boxes truly read-only
$('input[type="checkbox"][readonly]').on("click.readonly", function(event){event.preventDefault();}).css("opacity", "0.5");

Si vous souhaitez que la case à cocher soit modifiable à nouveau, procédez comme suit pour la case à cocher spécifique.

$('specific checkbox').off('.readonly').removeAttr("readonly").css("opacity", "1")
1
user1170104

Aucun de ce qui précède n'a fonctionné pour moi. Voici ma solution Vanilla.js: 

(function() {
    function handleSubmit(event) {
        var form = event.target;
        var nodes = form.querySelectorAll("input[disabled]");
        for (var node of nodes) {
            node.disabled = false;
        }
    }

    function init() {
        var submit_form_tag = document.getElementById('new_whatever');
        submit_form_tag.addEventListener('submit', handleSubmit, true);
    }

    window.onload = init_beworst;

})();

Assurez-vous de fournir un remplacement approprié pour l'identifiant de formulaire.

Mon application a un peu de contexte, où certaines cases sont pré-cochées, et d'autres vous avez une limite du nombre d'autres cases que vous pouvez cocher. Lorsque vous atteignez cette limite, toutes les cases non pré-cochées sont désactivées. Si vous décochez une case, toutes les cases non pré-cochées sont à nouveau activées. Lorsque l'utilisateur appuie sur Soumettre, toutes les cases cochées lui sont soumises, qu'elles soient pré-cochées ou non.

0
Eric