web-dev-qa-db-fra.com

RSForm Pro change la classe d'étiquette de groupe radio

Je suis en train de mettre en place un RSForm! La forme Pro utilise les boutons radio, mais je veux masquer l'entrée des boutons radio et utiliser l'étiquette pour la sélection, le code HTML pour la question est:

<div class="rsform-block rsform-block-question">
    <div class="formControlLabel">This is the question...?</div>
    <div class="formControls">
        <div class="formBody">
            <p class="rsformVerticalClear">
                <input type="radio" id="Question0" value="First Answer" name="form[Question]">
                <label for="Question0">First Answer</label>
            </p>

            <p class="rsformVerticalClear">
                <input type="radio" id="Question1" value="Second Answer" name="form[Question]">
                <label for="Question1">Second Answer</label>
            </p>

            <p class="rsformVerticalClear">
                <input type="radio" id="Question2" value="Third Answer" name="form[Question]">
                <label for="Question2">Third Answer</label>
            </p>
        </div>
    </div>
</div>

Y a-t-il un moyen de faire cela avec jQuery?

Par le biais de CSS, je souhaite modifier l'arrière-plan de l'étiquette sélectionnée (lorsque l'utilisateur clique dessus), le bouton radio d'entrée change, mais je ne peux pas trouver comment modifier l'étiquette en actif/actif.

Je pense que ce qui suit devrait fonctionner, mais cela ne semble pas, car l'étiquette n'a pas de classe associée.

$("input:radio[name='form[Question]']").change(function(){
    $("label").removeClass("selected");
    $("label[for='" + this.id + "']").toggleClass("selected", this.checked);
});

Des idées s'il vous plaît?

joomla-3.3.xjqueryjavascriptrsform
2
RustyJoomla

Tout d’abord, assurez-vous que la bibliothèque jQuery est en cours de chargement. À l'aide des outils de développement du navigateur, inspectez la tête rendue et vérifiez qu'elle est en cours de chargement. Sinon, vous devrez charger à partir de votre modèle ou effectuer une substitution de modèle pour la vue de composant gérant le rendu de page en question. De toute façon, vous devrez ajouter ce qui suit en haut.

JHtml::_('jquery.framework');

J'ai modifié l'extrait de code ci-dessous, en enveloppant un IIFE, en passant l'objet jQuery à la fonction en tant que $. La raison pour laquelle nous devons faire cela est que Joomla utilise toujours Mootools, bien qu'il soit en train de disparaître progressivement, ce qui utilise également le $ pour accéder aux méthodes de bibliothèque. Ce conflit requiert l'utilisation d'un IIFE ou de jQuery en mode noConflict ().

Référencer la cible sur laquelle vous avez cliqué dans votre fonction de rappel pour trouver l'étiquette et basculer dans la classe devrait résoudre le problème pour vous.

(function($) {
    $(document).ready(function(){
        $('input:radio[name="form[Question]"]').change(function(){
            console.log('Change event callback fired!');
            $(this).next().toggleClass("selected", $(this).prop("checked"));
        });
    });
})(jQuery);

Également changé le qualifiant de this.checked à $ (this) .prop ("coché"). Une erreur courante consiste à supposer que les propriétés et les méthodes des objets JavaScript natifs sont disponibles dans les objets jQuery du même élément.

J'ai modifié la réponse afin de refléter la fonction d'emballage dans la méthode de préparation de documents de jQuery afin de garantir le chargement complet du DOM.

2
Brian Bolli