Question

I think this is pretty simple, but I can’t figure out why #type2 can’t be clicked.

<input type="radio" id="type1" name="group1" checked>

<input type="radio" id="type2" name="group1">

<input type="text" class="type1">

<input type="text" class="type2" disabled>

<script>

function toggle() {
    if ($('#type1').attr('checked', true)) {
        $('.type1').attr('disabled', false);
        $('.type2').attr('disabled', true);
    }
    else if ($('#type2').attr('checked', true)) {
        $('.type1').attr('disabled', true);
        $('.type2').attr('disabled', false);
    }
}

$(document).ready(function() {
    toggle();
});

</script>

I can’t see what the problem is. Any help would be fantastic, thanks.

Answer 1

Try:

function toggle() {
    if ($('#type1').is(':checked')) {
        $('.type1').attr('disabled', false);
        $('.type2').attr('disabled', true);
    }
    else if ($('#type2').is(':checked')) {
        $('.type1').attr('disabled', true);
        $('.type2').attr('disabled', false);
    }
}

Example: http://jsfiddle.net/andrewwhitaker/z5Wbv/1/

The version of .attr you were using was setting #type1‘s checked attribute to true. You can use is, with the :checked selector to determine if a checkbox/radio button is checked.