Toggle Show and Enable Textfiled When Certain Radio Button is Selected

Question

I would like to be able to have an input field (initially hidden and disabled) to be shown and enabled every time the "Other" radio button is selected, and ofcoure to be hidden and disabled when a different radio button is selected . I have gotten this script to show and hide the textfield appropriately, but Id like to know how I can get enabling and disabling to happen with it

$('input[name="x_description"]').bind('change',function(){
    var showOrHide = ($(this).val() == "Other") ? true : false;
    $('#other_program_text').toggle(showOrHide);  
});

I know that this is how to show the field and enable the textfield, but cant figure out how to put it all together,

$(this).show().prop('disabled', false);

Thanks in advance, Dan

Answer 1

$('input[name="x_description"]').bind('change',function(){
    if ( showOrHide == true ) {
        $('#other_program_text').show().prop('disabled',false);
    } else if ( showOrHide == false ) {
        $('#other_program_text').hide().prop('disabled',true);
    }
});

Answer 2

You want to use the $(this).attr() function to set properties on an HTML element. With one parameter it'll read the passed param, with two it'll set it.

Like $(this).attr("enabled", true)

Answer 3

You can use "click" method

 $('input[name="x_description"]').click(function() {
       if($('#radio_button').is(':checked')) { 
           alert("it's checked"); //do your stuff
        }
 });

If your content are dynamically generated then use "live" method

 $('input[name="x_description"]').live('click',function() {
           if($('#radio_button').is(':checked')) { 
               alert("it's checked"); //do your stuff
            }
 });