JQuery correctly disabling and enabling one field, but not another

Question

There is a select box with an onchange function that enables and shows / disables and hides a label and textbox next to it. When the select box's value is "1", the label is showing up correctly, but for some reason the textbox, although it is showing up, is not being enabled. What am I doing wrong?

The HTML:

<select name="viewMap" id="viewMap" onchange="toggleRadius()">
                    <option value="1" selected="true">Yes</option>
                    <option value="0" >No</option>
                </select>
                <label for="radius" class="radius shown">Default Radius in Miles:</label>
                <input name="radius" type="text" size="5" value="300" class="radius shown" />

The javascript:

function toggleRadius()
    {
        if ($('#viewMap option:selected').val() == 1)
        {
            $('.radius').removeClass('hidden').addClass('shown').attr('disabled', 'false');
        } 
        else
        {
            $('.radius').removeClass('shown').addClass('hidden').attr('disabled', 'true');
        }
    }

Answer 1

I've always used

.attr('disabled', 'disabled') 

and

.removeAttr('disabled') 

to disable / enable things. I read somewhere that .attr('disabled', 'true') is more correct, but i don't remember where or why. but i'd try using .removeAttr('disabled') instead of setting it to false.

Answer 2

The disabled attribute works a bit differently. You should remove it, instead of setting it to "false" (a bit like the "nowrap" attribute...)

function toggleRadius()
{
    if ($('#viewMap option:selected').val() == 1)
    {
        $('.radius').removeClass('hidden').addClass('shown').removeAttr('disabled');
    } 
    else
    {
        $('.radius').removeClass('shown').addClass('hidden').attr('disabled', 'true');
    }
}