Disable drop down box on radio button click

Question

I have two radio buttons and a drop down box as you can see below. What I want to do is: 1. While no is checked, either hide, or grey out the drop down box, and 2. While yes is checked, show the drop down box.

Any pointers would be appreciated!

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

score 18 · Accepted Answer · edited Jan 31 '13 at 16:20

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

Also, set the dropdown's display style, or disabled property in HTML based on your default radiobutton selected on page load.

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

score 3 · Answer 2 · answered Sep 13 '10 at 14:42

3

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

http://jsfiddle.net/uSmVD/

answered Sep 13 '10 at 14:42

Robert

21,110
9
55
65

score 2 · Answer 3 · answered Sep 13 '10 at 14:39

2

You need to set your select control to disabled and use a similar code to this one:

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

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

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

answered Sep 13 '10 at 14:39

jAndy

231,737
57
305
359

I do have other radio buttons on the page. Will this affect those? – 109221793 Sep 13 '10 at 14:41
@TaraWalsh: yes it would. I adapted the code to make it more specific. – jAndy Sep 13 '10 at 14:43
Cool, I have placed this javascript code at the top of my HTML document like so: Is this the correct way to use this code? Right now it doesn't seem to work. – 109221793 Sep 13 '10 at 14:45
This won't re-disable if they change back. – Robert Sep 13 '10 at 14:46

d2burke · Answer 4 · 2010-09-13T14:59:01.813

1

You can hide it with jQuery:

$(document).ready(function(){     

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

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

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

check it: http://www.jsfiddle.net/cFUsU/

UPDATE: added $(document).ready(); method to start set this code to action when the page is ready

edited Sep 13 '10 at 14:59

answered Sep 13 '10 at 14:42

d2burke

4,081
3
39
51

Hi, where should I insert this javascript? I'm a bit of a newbie to it. – 109221793 Sep 13 '10 at 14:52
You can put this inside a ` – d2burke Sep 13 '10 at 14:57
Yeah I've done that but it doesn't seem to work for me :-\ Is there anything else I need to do? – 109221793 Sep 13 '10 at 15:00
what does it do? can I see your code? I'm sure there is something simple missing :) Did you check it out in jsfiddle? If you have code I can look at, we'll get it going. – d2burke Sep 13 '10 at 15:09

score 1 · Answer 5 · answered Sep 13 '10 at 14:44

1

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

answered Sep 13 '10 at 14:44

Flo Edelmann

2,573
1
20
33

score 1 · Answer 6 · answered Sep 13 '10 at 14:44

1

Would this do it?

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

Tested, works great. Good luck.

answered Sep 13 '10 at 14:44

mkoistinen

7,724
3
41
56

this is trouble. not removing the `disabled` attribute could case some browser to still disable the element, even when it's value is 0. Actually it doesn't matter which value you set, as long as the attribute `disabled` is present, an element must get disabled (w3c). – jAndy Sep 13 '10 at 15:16

Disable drop down box on radio button click

6 Answers6

Linked