Activer un groupe de radio avec checkbox

Par HoustonB, il y a 11 ans

Javascript

Hello tous le monde ,

J'ai un léger soucis ...

En effet j'aimerais activer et désactiver un group de radio button lorsqu'une checkbox est checked ( Jusque la rien de bien fou )

La difficulté est que c'est en liste
Exemple:

Checkbox radio radio; Checkbox radio radio; Checkbox radio radio; ...

Pour l'instant je peux activer et désactiver mais cela fonctionne sur toute les radio :/

voici mon code JS:

$("input[id='Enable']:checkbox").change(function () { if ($("#Enable").is(':checked')) { $('.test').removeAttr('disabled'); } else { $('.test').attr('disabled', 'disabled'); }

Et une partie de l'html:

<input type="checkbox" id="Enable"> <input type="radio" id="test" disabled> <input type="radio" id="test" disabled>

24 réponses

betaWeb, il y a 11 ans

Tu ne peux pas avoir 2x le même id sur tes input, c'est le principe d'un id il est unique.
Sinon explique mieux ton problème je n'ai pas sûr d'avoir bien compris ?

HoustonB, il y a 11 ans

Re salut ,
Ah mince j'vais mis class enfaite lol enfaite j'ai une liste de mot avec deux bouton radio pour chaque mot , j'aimerais mettre une checbok box devant chaque mot pour activer les deux bouttons radio (une sorte de securité en cas d'erreur : cochage alors que on voulais pas ce mot )

betaWeb, il y a 11 ans

Il te faut wrapper chaque groupe d'inputs, pour ensuite cibler seulement les radio ayant en commun la div.input-group parente:

<div class="input-group"> <input type="checkbox"> <input type="radio" name="radio_1" value="1" disabled> <input type="radio" name="radio_1" value="2" disabled> </div>

Pour la partie JS, essayes ceci:

$("input[type='checkbox']").on('change', function (){ var self = $(this), parent = self.parent(".input-group"), radio = $("input[type='radio']", parent); return self.is(':checked') ? radio.removeAttr('disabled') : radio.attr('disabled', 'disabled'); });
HoustonB, il y a 11 ans

c'est ce que je pensais , je test ça desuite et je te redis :)

EDIT: Toujours pas :(

Le code Html:

<div class="row"> <div class="col-md-9"><input type="checkbox" id="Enable"> Ambitieux</div> <div class="col-md-2"><input type="radio" class="test" name="qualite[Ambitieux]" value="Point Fort" disabled></div> <div class="col-md-1"><input type="radio" class="test" name="qualite[Ambitieux]" value="Point Faible" disabled></div> </div>

Et le JS :

$("input[id='Enable']:checkbox").change(function () { var self = $(this), parent = self.parent(".row"), radio = $("input[type='radio']", parent); return self.is(':checked') ? radio.removeAttr('disabled') : radio.attr('disabled', 'disabled'); });

EDIT2: J'ai essayer ton code sur Jsfiddle et ça ne fonctionne pas :( , on doit pas utiliser children à la place de parent ? :)

betaWeb, il y a 11 ans

Et évidemment que ça ne fonctionne pas ! Tu sélectionne la div parente directe de ton input, or tu dois viser le wrapper (class="row"). Et puis c'est quoi cet id="Enabled" ? Ne me dis pas que chaque input[checkbox] a ce même id ? Si tel est le cas, là c'est sur, ça ne fonctionnera pas.

Ensuite, évite de cibler la classe de Bootstrap "row", elle est générique et non liée uniquement à ton projet, il pourrait avoir des conflits si tu l'as ailleurs sur la page.

Essaye plutôt de cette façon:

<div class="row inputs-wrapper"> <div class="col-md-9"><input type="checkbox" class="enable"> Ambitieux</div> <div class="col-md-2"><input type="radio" class="test" name="qualite[Ambitieux]" value="Point Fort" disabled></div> <div class="col-md-1"><input type="radio" class="test" name="qualite[Ambitieux]" value="Point Faible" disabled></div> </div> $("input.enable[type='checkbox']").change(function() { var self = $(this), wrapper = self.parents(".inputs-wrapper"), radio = $("input[type='radio']", wrapper); return self.is(':checked') ? radio.removeAttr('disabled') : radio.attr('disabled', 'disabled'); });

EDIT: https://jsfiddle.net/rbobzchj/2/

HoustonB, il y a 11 ans

Nickel ca marche parfaitement :) Merci encore !!

betaWeb, il y a 11 ans

De rien. Mais fais gaffe, il y a des conventions à respecter en JS ;)

HoustonB, il y a 11 ans

J'ai encore besoin de tes services pour une dernière fois :) ( jamais 2 sans 3 ) :p

betaWeb, il y a 11 ans

Dis-moi tout ?

HoustonB, il y a 11 ans

Alors j'ai une formulaire que je rempli en fonction de ma base de donnée ( ex: j'edit un article , je recupere toute les donnée et je les affiche )
et je recupère mes checkboxs et je souhaiterais que lorsque j'ai une checkbox checked dans une arborescence ( une liste de metier contient des sous metiers ) je souhaite dérouler cette arborescence automatiquement...

J'ai établi un code ( simplifier ) de ce que j'ai .
ici
Ca fonctionne sur fiddle mais pas dans mon code :/
Tu as une idée ?

betaWeb, il y a 11 ans

Ton code JSFiddle ne m'a pas l'air complet, je n'ai que des checkboxes.

HoustonB, il y a 11 ans

SIsi ça marche
il faut juste enlever checked sur les checkbox pour voir

HoustonB, il y a 11 ans

Oui lol ca fonctionne avec le run etant donnée que je veux que ca marche directement au chargement de la page :)
si aucun n'est check tu vas rien voir
si un est check ca affiche tout

betaWeb, il y a 11 ans

Beh j'ai beau checker/dechecker il ne se passe absolument rien de plus ou de moins :/

HoustonB, il y a 11 ans

Autant pour moi j'ai oublier de hide subsublist :/ ICI

betaWeb, il y a 11 ans

Là c'est pire j'ai une erreur 500 dans le cadre bas-droite censé accueillir le résultat.

HoustonB, il y a 11 ans

A la c'est fiddle qui bug , faut juste refaire run et normalement rien ne s'affiche et si tu ecrit dans une checbox checked tous s'affiche

betaWeb, il y a 11 ans

Beh j'ai refais un run et je n'ai absolument rien eu de plus ou de moins que l'erreur :/

HoustonB, il y a 11 ans

Ouah j'lai copier coller rien ne marche -_- ca va me rendre fou !
Bref clairement je souhaite slide down a l'ouverture de la page quand un checkbox est checked :)

betaWeb, il y a 11 ans

Rajoute un attribut data aux input afin de spécifier quelle div du veux slidedown:

<input type="checkbox" class="checkbox" name="ma_checkbox[1]" data-class=".mon-slider" />

JS:

$('input.checkbox').filter(':checked').each(function(i, input){ var self = $(input), toSlide = self.data('class') || self.attr('data-class'); if (!$(toSlide).hasClass('is-expanded')) { $(toSlide).addClass('is-expanded').slideDown(250); } });

C'est un exemple. Tu as compris ?

HoustonB, il y a 11 ans

Heu un peu mais c'est pas les input que je veux afficher c'est un groupe d'input qui sont regrouper dans une div de class subsublist

betaWeb, il y a 11 ans

eh beh data-class contient le nom de la classe cible, il suffit de mettre cette classe à ta div "subsublist" et voilà ;)

<div class="subsublist mon-slider"> <!-- tes inputs ici --> </div>
HoustonB, il y a 11 ans

Je test ça et je te redis :)