ti-enxame.com

RSForm Pro alterando a classe do rótulo do Radio Group

Estou configurando um RSForm! Pro formulário usando os botões de opção, mas eu quero ocultar a entrada dos botões de opção e usar o rótulo para a seleção, o HTML da pergunta é:

<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>

Existe alguma maneira que eu possa fazer isso com jQuery?

Através do CSS, desejo alterar o plano de fundo do rótulo selecionado (quando clicado), o botão de opção de entrada muda, mas não consigo descobrir como alterar o rótulo para ativo/foco.

Eu acho que o seguinte deve funcionar, mas não parece, pois o rótulo não tem uma classe associada a ele.

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

Alguma idéia por favor?

2
RustyJoomla

Primeiro, verifique se a biblioteca jQuery está sendo carregada. Usando as ferramentas do desenvolvedor do navegador, inspecione a cabeça renderizada e verifique se está sendo carregada. Caso contrário, será necessário carregar do seu modelo ou fazer uma substituição de modelo para a exibição do componente que lida com a renderização da página em questão. De qualquer forma, você precisará adicionar o seguinte ao topo.

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

Editei o trecho de código abaixo, agrupando em um IIFE, passando o objeto jQuery para a função como $. A razão pela qual precisamos fazer isso é que o Joomla ainda está usando o Mootools, embora esteja sendo eliminado, que também usa o $ para acessar os métodos da biblioteca. Esse conflito requer o uso de um IIFE ou o jQuery no modo noConflict ().

A referência ao destino clicado na função de retorno de chamada para localizar o rótulo e alternar a classe deve resolver isso para você.

(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);

Também alterou o qualificador de this.checked para $ (this) .prop ("selected"). Um erro comum é assumir que propriedades e métodos nativos de objetos JavaScript estão disponíveis nos objetos jQuery do mesmo elemento.

Editei a resposta para refletir a função de quebra automática dentro do método pronto para documentos do jQuery para garantir que o DOM esteja totalmente carregado.

2
Brian Bolli