I am attempting to toggle disabled = true|false on a <input type=text>, using a checkbox. I am able to get the value of the input, but I cannot set the input to disabled.

my jquery/js code

<script>

$(function () {

    $('.date').datepicker();

    $('body').on('change', '.housing', function () {

        if ($(this).val() == 'dorms') {

            $(this).parent().next(.dorms).show();

        } else {

            $(this).parent().siblings(.dorms).hide();

        }

    });

    $('body').on('change', '.single', function () {

        if ($(this).checked) {

            $('#echo1').text($(this).prev(.roommate).val());  // this works

            $(this).prev(.roommate).val(''); // does not empty the input

            $(this).prev(.roommate).disabled = true; // does not set to disabled

            $(this).prev(.roommate).prop('disabled', true);  // does not set to disabled

            $('#echo2').text($(this).prev(.roommate).prop('disabled')); // always says false

        } else {

            $('#echo1').text($(this).prev(.roommate).val()); // this works

            $(this).prev(.roommate).disabled = false;  // always stays false

            $('#echo2').text($(this).prev(.roommate).prop('disabled'));  // always says false

        }

    });

});

</script>

my html code

<div class=registration_housing particpant_0 data-sync=0>

    <div>

        <label class=particpant_0></label>

    </div>

    <div>

        <label>Off Campus (not included)</label>

        <input type=radio name=housing[0] value=none class=housing />

    </div>

    <div>

        <label>On Campus</label>

        <input type=radio name=housing[0] value=dorms class=housing />

    </div>

    <div class=dorms style=display:none;>

        <div>

            <label>Checkin:</label>

            <input type=text name=check_in[0] class=date />

        </div>

        <div>

            <label>Checkout:</label>

            <input type=text name=check_out[0] class=date />

        </div>

        <div>

            <label>Roommate:</label>

            <input type=text name=roommate[0] class=roommate />

            <input type=checkbox name=roommate_single[0] value=single class=single />check for singe-occupancy</div>

    </div>

    <div class=line>

        <hr size=1 />

    </div>

</div>

<div>

    <label id=echo1></label>

</div>

<div>

    <label id=echo2></label>

</div>

you can see this at http://jsfiddle.net/78dQE/1/

Any idea why I can get the value of (.roommate) - ie. $(this).prev(.roommate).val()

but

$(this).prev(.roommate).disabled = true;

OR

$(this).prev(.roommate).prop('disabled', true);

will not set (.roommate) to disabled?