show/hide checkbox based on select option value

Question

How to show/hide a checkbox based on select option value? I want to show a checkbox based on a single value in select option and want to hide it when other values are selected. I am trying for jquery solution.

$('#abcselect').change(function(){$('#unknownlicense').toggle($(this).val() == 'first')});

Answer 1

$(document).ready(function() {
    $("select").change(function() {
        $("#foo").toggle($(this).val() == "something"));
    }).change(); // in case the first option is selected on page load
});

Try it out: http://jsfiddle.net/JMGMx/3/

Also, see http://api.jquery.com/toggle/ and http://api.jquery.com/slidetoggle/

Answer 2

    $('#YourSelectId').change(function () {
        if($(this).val() == 'TheValueOftheOptionThatHasCheckboxes'){
            $('#IdOfDivContainingTheCheckBoxes').show();
        }
        else{
            $('#IdOfDivContainingTheCheckBoxes').hide();
        }
    });

Answer 3

You could always set that checkbox (or the surrounding div) to the same ID as the value in the select option so that when that value is selected, you just do a:

$('#sameIDasOption').show();

Answer 4

You can bind to the select option changed using jquery with code similar to the following:

$('.target').change(function() { 
    alert('Handler for .change() called.'); 
 });

You can show and hide with the .show() and .hide() methods.

You can combine these to do something like

$('#SelectId').change(function (){
    if($(this).val() == 'ShowCheckBox'){
         $('DivWithCheckboxes).show()
     }
     else{
         $('DivWithCheckboxes).hide()
     }
});

You can find more information about the functions at:

http://api.jquery.com/change/
http://api.jquery.com/show/
http://api.jquery.com/hide/