web-dev-qa-db-fra.com

Pourquoi les boutons radio ne peuvent-ils pas être "en lecture seule"?

Je voudrais montrer un bouton radio, avoir sa valeur soumise, mais en fonction des circonstances, ne pas le modifier. Disabled ne fonctionne pas, car il ne soumet pas la valeur (ou le fait-il?) Et le bouton radio est grisé. La lecture seule est vraiment ce que je recherche, mais pour une raison mystérieuse, cela ne fonctionne pas.

Y a-t-il une astuce étrange que je dois tirer pour que la lecture seule fonctionne comme prévu? Devrais-je simplement le faire en JavaScript à la place?

Incidemment, quelqu'un sait-il pourquoi la lecture seule ne fonctionne pas dans les boutons radio alors qu'elle fonctionne dans d'autres balises d'entrée? Est-ce une de ces omissions incompréhensibles dans les spécifications HTML?

htmlradio-buttonreadonly
180
mcv

J'ai simulé en lecture seule un bouton radio en désactivant uniquement les boutons radio non cochés. Cela empêche l'utilisateur de sélectionner une valeur différente, et la valeur cochée sera toujours publiée lors de l'envoi.

Utiliser jQuery pour faire en lecture seule:

$(':radio:not(:checked)').attr('disabled', true);

Cette approche a également fonctionné pour créer une liste de sélection en lecture seule, sauf que vous devez désactiver chaque option non sélectionnée.

100
Megan

Les boutons radio ne doivent être en lecture seule que s’il existe d’autres options. Si vous n'avez pas d'autres options, un bouton radio coché ne peut pas être décoché. Si vous avez d'autres options, vous pouvez empêcher l'utilisateur de modifier la valeur simplement en désactivant les autres options:

<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

Fiddle: http://jsfiddle.net/qqVGu/

191
Sampson

C'est le truc que vous pouvez aller avec.

<input type="radio" name="name" onclick="this.checked = false;" />
18
Sarfraz

J'ai un long formulaire (plus de 250 champs) qui affiche sur une base de données. C'est une application d'emploi en ligne. Lorsqu'un administrateur va consulter une application qui a été déposée, le formulaire est rempli avec les données de la base. Les textes d'entrée et les zones de texte sont remplacés par le texte qu'ils ont soumis, mais il est utile de conserver les radios et les cases à cocher comme éléments de formulaire. Les désactiver les rend plus difficiles à lire. La définition de la propriété .checked sur false onclick ne fonctionnera pas, car elles ont peut-être été vérifiées par l'utilisateur en remplissant l'application. De toute façon...

onclick="return false;"

fonctionne comme un charme pour "désactiver" les radios et les cases à cocher ipso facto.

10
humbolight

La meilleure solution consiste à définir l'état activé ou désactivé (à partir du client ou du serveur) et à ne pas permettre à l'utilisateur de le modifier après (par exemple, en lecture seule), procédez comme suit:

<input type="radio" name="name" onclick="javascript: return false;" />
8
Vipresh

Manière JavaScript - cela a fonctionné pour moi.

<script>
$(document).ready(function() {
   $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>

Raison:

  1. $('#YourTableId').find('*') -> cela renvoie toutes les balises.

  2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); itère tous les objets capturés dans cette opération et désactive les balises d'entrée.

Analyse (débogage):

  1. form:radiobutton est considéré en interne comme une balise "input".

  2. Comme dans la fonction ci-dessus (), si vous essayez d’afficher document.write(this.tagName);

  3. Partout où, dans les balises, il trouve des boutons radio, il renvoie une balise d'entrée.

Ainsi, la ligne de code ci-dessus peut être plus optimisée pour les balises de bouton radio, en remplaçant * par l'entrée: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

2
user3702798

J'ai mis au point un moyen très gourmand en javascript d'obtenir un état en lecture seule pour les cases à cocher et les boutons radio. Il est testé sur les versions actuelles de Firefox, Opera, Safari, Google Chrome, ainsi que sur les versions actuelles et antérieures de IE (jusqu'à IE7). 

Pourquoi ne pas simplement utiliser la propriété désactivée que vous demandez? Lors de l'impression de la page, les éléments d'entrée désactivés apparaissent en gris. Le client pour lequel cela a été mis en œuvre souhaitait que tous les éléments apparaissent de la même couleur.

Je ne suis pas sûr d'avoir le droit de poster le code source ici, car je l'ai développé tout en travaillant pour une entreprise, mais je peux sûrement partager les concepts.

Avec les événements onmousedown, vous pouvez lire l'état de sélection avant que l'action de clic ne le modifie. Vous stockez donc ces informations, puis restaurez ces états avec un événement onclick.

<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>

<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>

La partie javascript de ceci fonctionnerait alors comme ceci (encore une fois, seuls les concepts):

var selectionStore = new Object();  // keep the currently selected items' ids in a store

function storeSelectedRadiosForThisGroup(elementName) {
    // get all the elements for this group
    var radioOrSelectGroup = document.getElementsByName(elementName);

    // iterate over the group to find the selected values and store the selected ids in the selectionStore
    // ((radioOrSelectGroup[i].checked == true) tells you that)
    // remember checkbox groups can have multiple checked items, so you you might need an array for the ids
    ...
}

function setSelectedStateForEachElementOfThisGroup(elementName) {
    // iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
    ...

    // make sure you return false here
    return false;
}

Vous pouvez maintenant activer/désactiver les boutons radio/cases à cocher en modifiant les propriétés onclick et onmousedown des éléments d'entrée.

2
Tom

J'ai trouvé que l'utilisation onclick='this.checked = false;' fonctionnait dans une certaine mesure. Un bouton radio sur lequel vous avez cliqué ne serait pas sélectionné. Toutefois, s’il existait un bouton radio qui était déjà sélectionné (par exemple, une valeur par défaut), ce bouton radio serait désélectionné.

<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>

Pour ce scénario, laisser la valeur par défaut seule et désactiver le ou les autres boutons radio préservent le bouton radio déjà sélectionné et l'empêchent d'être désélectionné.

<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>

Cette solution n’est pas le moyen le plus élégant d’empêcher la modification de la valeur par défaut, mais elle fonctionnera que le javascript soit activé ou non.

1
JW8

Essayez l’attribut disabled, mais je pense que vous n’obtiendrez pas la valeur des boutons radio ..__ ou que vous définissez des images comme suit:

<img src="itischecked.gif" alt="[x]" />radio button option

Meilleures salutations.

1
Tim

Une option assez simple serait de créer une fonction javascript appelée sur l'événement "onsubmit" du formulaire pour permettre au radiobutton de revenir afin que sa valeur soit affichée avec le reste du formulaire. 
Cela ne semble pas être une omission sur les spécifications HTML, mais un choix de conception (logique, à mon humble avis), un bouton radio ne peut pas être lu seul, un bouton ne peut l'être, si vous ne voulez pas utiliser puis désactivez-le.

1
wintermute

Pour les boutons radio non sélectionnés, marquez-les comme étant désactivés. Cela les empêche de répondre aux entrées de l'utilisateur et d'effacer le bouton radio coché. Par exemple:

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>
1
dpolican

J'utilise un élément JS plugin that styles et les éléments d'entrée radio et utilise le jQuery suivant pour établir un "état en lecture seule" où la valeur sous-jacente est toujours publiée, mais l'élément d'entrée semble inaccessible à l'utilisateur, ce qui est I croire la raison pour laquelle nous utiliserions un attribut d'entrée en lecture seule ...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}
0
chopstik