2010-10-27 8 views
0

Scénario: J'ai une liste déroulante avec des boutons radio, qui ne doivent pas être sélectionnés pour soumettre le formulaire, et après que j'ai choisi une option, à partir de là il est impossible de le désélectionner. Je veux que ce soit possible. Réflexions sur les solutions: 1) Implémentez une fonction qui vous permet de désélectionner le radiobutton, comme une case à cocher. Cela semble être une mauvaise idée.La meilleure façon d'ajouter "décocher les radiobuttons" - fonctionnalité dans Rails?

2) Ajouter une option 'réinitialiser radiobutton' dans la liste déroulante, qui réinitialise les radiobuttons lorsqu'ils sont sélectionnés.

3) Ajouter un bouton «réinitialiser tous les boutons radio». Peut-être pour toutes les listes déroulantes sur la page.

4) Créer une option 'espace réservé' dans la liste déroulante, qui ne fait rien. La question ici est, si j'ai déjà fait une sélection X et soumis le formulaire, si je sélectionne plus tard Placeholder, toute donnée sauvegardée lors de la sélection X doit être annulée. Jusqu'ici je pense que l'option 2 est la meilleure, mais je veux entendre vos idées. Ce est le code que je travaille avec en ce moment:

<% form.inputs do %> 
     <% @account.account_preference.editorial_attributes.each do |key, value| %> 
     <%= account_pref.input "editorial_#{key}".to_sym, :as => :radio, :collection => (options_for(Editorial, key.to_sym) + option_text_and_value("Reset radiobuttons")), :wrapper_html => { :class => "compact" }, :label => key.titleize %> 
     <% end %> 

Où options_for (Editorial, key.to_sym) recueille les options qui font réellement quelque chose, et option_text_and_value ("Reset radiobuttons") est censé ajouter une autre option que je peux ensuite lier à la fonctionnalité pour décocher les radiobuttons. Cela ne fonctionne pas comme prévu, car option_text_and_value renvoie deux options au lieu d'une. J'ai essayé de chercher une autre méthode d'option sur apidock mais n'en ai pas encore trouvé. Ce n'est pas la question principale, mais si quelqu'un sait à ce sujet et les commentaires, je serais très reconnaissant. Donc, pour conclure: À votre avis, quelle est la meilleure façon de procéder?

Cordialement, Emil

Répondre

2

Je ne sais pas pourquoi sur la terre que vous voulez mettre des boutons radio dans une liste déroulante. Cela semble déroutant pour les utilisateurs. Pourquoi ne pas simplement sélectionner l'option déroulante de la manière normale? Est-ce une exigence commerciale?

Si vous devez absolument le faire, je pense que l'option 2 est la meilleure que vous avez présentée, même si je ne sais pas si elle doit être une option dans la liste déroulante. Cela pourrait fonctionner mieux comme un lien ou un bouton à côté ou sous la liste. La liste et le lien (ou le bouton) doivent être dans un div contenant afin que la liste déroulante correspondante soit facile à trouver, dans le cas où vous avez plusieurs listes déroulantes comme ceci sur la page. De là, il est assez facile de joindre un javascript au lien (ou bouton) qui désélectionnera tous les boutons radio de la liste. Mais je suggère toujours que les boutons radio dans une liste déroulante est juste mauvais design du point de vue d'un utilisateur et je n'ai aucune idée de ce que cela permettrait d'accomplir.

+0

Je maintiens un projet où cela ressemble à cela maintenant, et je suis d'accord que c'est déroutant. Question: Si je supprime les radiobuttons, et que je vais plutôt avec une liste déroulante "normale", est-ce qu'il sera plus facile de désactiver toutes les options? Parce que c'est la fonctionnalité que je suis après. Merci pour vos conseils! –

+0

Votre question me donne l'impression que plusieurs éléments dans une liste déroulante sont sélectionnés, ce qui ne semble pas possible. Est-ce le cas, ou parlez-vous de la désélection des options de toutes les listes déroulantes? D'une manière ou d'une autre, je pense qu'il est également facile de désélectionner tous les boutons radio car c'est de désélectionner toutes les options déroulantes sur une page, mais les listes déroulantes devraient avoir une valeur par défaut (par exemple "Sélectionner une valeur"). le selectedIndex à 0. Donc peut-être $ ('select'). each (function() {this.selectedIndex = 0}) (ma syntaxe peut ne pas être exacte) – Samo

+0

Gardez à l'esprit que mon précédent commentaire suppose que vous utilisez jQuery. Si vous utilisez un prototype, il est similaire mais probablement légèrement différent. Je n'ai pas utilisé de prototype depuis longtemps, vous devrez donc vérifier l'API. – Samo

1

Les boutons radio sont conçus pour choisir quelque chose parmi un groupe d'options. Chaque fois que je vois un groupe de boutons radio avec aucun bouton sélectionné, je pense que celui qui l'a conçu ne comprend pas les boutons radio. Peut-être que vous devez ajouter un bouton radio "Aucune des réponses ci-dessus"?

0

J'ai un problème similaire en fait, et il est certainement parfois nécessaire de désélectionner un élément de formulaire construit à partir de boutons radio.

Je travaille actuellement sur un formulaire en plusieurs étapes qui ne contient que quelques champs obligatoires (questionnaire de réflexion), l'utilisateur étant capable de revenir aux pages précédentes du formulaire, ce qui permet de désélectionner les réponses précédentes par boutons radio. Le problème n'est pas tellement de désélectionner les boutons radio, cela peut être facilement fait en accrochant jQuery sur l'élément, et en le contrôlant à travers ses événements, mais Rails est trop intelligent dans son affichage des données de formulaire, laissant les champs qui n'ont pas de valeur, et par conséquent ne pas mettre à jour la valeur à zéro dans la base de données, en me laissant avec la valeur initialement sélectionnée lorsque je recule dans le formulaire. Donc, ce que je pense faire est d'avoir une méthode de modèle pour les champs de bouton radio qui va vider les valeurs lorsque rien n'est soumis pour une page particulière (celui de chaque champs bouton radio vit sur). Comme pour votre question initiale: Créez simplement un événement jQuery click pour votre contrôle de bouton radio (par classe HTML), et onclick vous vérifiez si la valeur de l'option cliquée, a son checked = 'checked' set, et si oui, supprimer l'option cochée et la désélectionner (théoriquement).