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

javascriptcheckbox
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
Kundan Singh Chouhan
<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