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
Réponse acceptée

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/

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
Auteur

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 )

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
Auteur

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 ? :)

HoustonB
Auteur

Nickel ca marche parfaitement :) Merci encore !!

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

HoustonB
Auteur

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

Dis-moi tout ?

HoustonB
Auteur

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 ?

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

HoustonB
Auteur

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

HoustonB
Auteur

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

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

HoustonB
Auteur

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

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

HoustonB
Auteur

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

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

HoustonB
Auteur

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

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
Auteur

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

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
Auteur

Je test ça et je te redis :)