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 ??
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;
}
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" />
<input type="checkbox" checked onclick="return false;" onkeydown="return false;"/>
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;"/>
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:
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)
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.
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")
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.