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

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>

Violon: http://jsfiddle.net/qqVGu/

C'est l'astuce avec laquelle vous pouvez aller.

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

J'ai un long formulaire (250 + champs) qui poste dans une base de données. C'est une demande d'emploi en direct. Lorsqu'un administrateur regarde une application qui a été déposée, le formulaire est rempli avec des données de la base de données. Les textes d'entrée et les zones de texte sont remplacés par le texte qu'ils ont soumis, mais les radios et les cases à cocher sont utiles à conserver en tant qu'éléments de formulaire. Désactiver les rend plus difficiles à lire. Réglage de l' .checked propriété à false onclick ne fonctionnera pas car ils peuvent avoir été vérifiés par le utilisateur 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.

La meilleure solution pour définir l'état vérifié ou décoché (à partir du client ou du serveur) et pour ne pas laisser l'utilisateur le changer après wards (c'est-à-dire le faire en lecture seule), procédez comme suit:

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

J'ai trouvé un moyen javascript lourd pour atteindre un État en lecture seule pour les cases à cocher et les boutons radio. Il est testé contre les versions actuelles de Firefox, Opera, Safari, Google Chrome, ainsi que les versions actuelles et précédentes D'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 sortent dans une couleur grise. Le client pour lequel cela a été mis en œuvre voulait que tous les éléments sortent de la même couleur.

Je suis Je ne sais pas si je suis autorisé à poster le code source ici, car j'ai développé cela 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 seulement 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 la radio boutons / cases à cocher en modifiant les propriétés onclick et onmousedown des éléments d'entrée.

Façon 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 sur tous les objets capturés dans ce et désactiver 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'imprimer document.write(this.tagName);

3. Partout Où, dans les balises qu'il trouve des boutons radio, il retourne une balise input.

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

Une option assez simple serait de créer une fonction javascript appelée sur l'événement "onsubmit" du formulaire pour activer le bouton radiobutton 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 radiobutton ne peut pas être en lecture seule comme un bouton ne peut pas l'être, si vous ne voulez pas l'utiliser, désactivez-le.

J'ai trouvé que l'utilisation de onclick='this.checked = false;' travaillé dans une certaine mesure. Un bouton radio qui a été cliqué ne sera pas sélectionné. Cependant, s'il y avait un bouton radio qui était déjà sélectionné (par exemple, une valeur par défaut), ce bouton radio deviendrait 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 les autres boutons radio préserve le bouton radio déjà sélectionné et l'empêche 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 la plus manière élégante d'empêcher la valeur par défaut d'être modifiée, mais cela fonctionnera si javascript est activé ou non.

Pour les boutons radio non sélectionnés, signalez-les comme désactivés. Cela les empêche de répondre à l'entrée de l'utilisateur et de désactiver le bouton radio vérifié. Par exemple:

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

Essayez l'attribut disabled, mais je pense que vous n'obtiendrez pas la valeur des boutons radio. Ou définir des images à la place comme:

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

Cordialement.

Sur init:

pscript = "try{if($(this).attr('readonly')){return false;};}catch(err){};"

Me.Attributes.Add("onclick", pscript)

Gonza

Qu'en est-il de capturer un événement" On_click () " dans JS et de le vérifier comme ici?:

Http://www.dynamicdrive.com/forums/showthread.php?t=33043