Désactiver la liste déroulante sur le bouton radio cliquez sur

J'ai deux boutons radio et un menu déroulant comme vous pouvez le voir ci-dessous. Ce que je veux faire est: 1. Alors que non est coché, soit masquer, ou grise la boîte déroulante, et 2. Alors que oui est cochée, montre la liste déroulante.Désactiver la liste déroulante sur le bouton radio cliquez sur

Tous les pointeurs seraient appréciés!

<td colspan="4"> 
<input name="discount" type="radio" id="Yes" value="Yes" />Yes 
<input name="discount" type="radio" id="No" value="No" checked="checked" />No<br /> 
<select class="purple" name="discountselection" id="discountselection"> 
<option value="1 Year" selected="selected">1 Year</option> 
<option value="2 Years">2 Years</option> 
<option value="3 Years">3 Years</option> 
</select>     
</td>

Source

2010-09-13 109221793

<script type="text/javascript"> 
        $("#Yes").click(function() { 
         $("#discountselection").attr("disabled", false); 
         //$("#discountselection").show(); //To Show the dropdown 
        }); 
        $("#No").click(function() { 
         $("#discountselection").attr("disabled", true); 
         //$("#discountselection").hide();//To hide the dropdown 
        }); 
    </script>

Réglez aussi le style d'affichage de la liste déroulante, ou bien désactivé en HTML en fonction de votre RadioButton sélectionné par défaut sur la charge de page.

<select name="discountselection" id="discountselection" disabled="disabled"> 
    <option value="1 Year" selected="selected">1 Year</option> 
    <option value="2 Years">2 Years</option> 
    <option value="3 Years">3 Years</option> 
    </select>

Source

2010-09-13 14:43:37

Vous devez régler votre commande select-disabled et utiliser un code similaire à celui-ci:

$(function(){ 
    $('input:radio[name=discount]').one('change', function(){ 
     $('.purple').removeAttr('disabled'); 
    }); 
});

Voir http://www.jsfiddle.net/A3BuQ/6/

Ref .: .one(), .removeAttr()

Source

2010-09-13 14:39:15 jAndy

J'ai d'autres boutons radio sur la page. Est-ce que cela affectera ceux? – 109221793

@TaraWalsh: oui ce serait le cas. J'ai adapté le code pour le rendre plus spécifique. – jAndy

Cool, j'ai placé ce code javascript en haut de mon document HTML comme suit: Est-ce la bonne façon d'utiliser ce code? En ce moment, cela ne semble pas fonctionner. – 109221793

$('input:radio[name="discount"]').change(function() { 
    if ($(this).val()=='Yes') { 
     $('#discountselection').attr('disabled',true); 
    } else 
     $('#discountselection').removeAttr('disabled'); 
});

http://jsfiddle.net/uSmVD/

Source

2010-09-13 14:42:02 Robert

Vous pouvez le cacher avec jQuery:

$(document).ready(function(){  

$('#discountselection').hide(); 

     $('#No').click(function(){ 
      $('#discountselection').hide(); 
     }); 

     $('#Yes').click(function(){ 
      $('#discountselection').show(); 
     }); 
});

le vérifier: http://www.jsfiddle.net/cFUsU/

MAJ: Ajout $ (document) .ready(); méthode pour commencer le réglage de ce code à l'action lorsque la page est prête

Source

2010-09-13 14:42:40 d2burke

Salut, où dois-je insérer ce javascript? Je suis un peu novice. – 109221793

Vous pouvez mettre cela à l'intérieur d'un '

$(function(){ 
    $('input:radio').bind('change', function(){ 
    $('#discountselection').attr('disabled', !$("#yes").is(":checked")); 
    }); 
});

Source

2010-09-13 14:44:00 elektronikLexikon

Est-ce que ce faire?

$('input:radio').bind('change', function(){ 
    $('select').attr('disabled', $(this).val() == "No"); 
});

Testé, fonctionne très bien. Bonne chance.

Source

2010-09-13 14:44:33 mkoistinen

Ceci est un problème, mais ne pas supprimer l'attribut 'disabled' pourrait empêcher certains navigateurs de désactiver l'élément, même si sa valeur est 0 .En fait, peu importe la valeur que vous définissez, tant que l'attribut 'disabled' est présent, un élément doit être désactivé (w3c). – jAndy

Désactiver la liste déroulante sur le bouton radio cliquez sur

Répondre

Questions connexes