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>
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');
});
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 ?
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');
});
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 ? :)
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 ?
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
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
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 ?
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>