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>
<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>
$('input:radio[name="discount"]').change(function() {
if ($(this).val()=='Yes') {
$('#discountselection').attr('disabled',true);
} else
$('#discountselection').removeAttr('disabled');
});
http://jsfiddle.net/uSmVD/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With