Jquery disable input with attr()

Question

I have a wired behaviour when I try to disable or readonly a input field using the attr().

removeAttr('disabled') is working ok.

attr('name', 'somthing') is working

attr('id', 'something else') is working

attr('disabled','disabled') not working -> it writes only disabled="" in the DOM and it does not disable the input field

attr('readonly','readonly') not working -> it writes only readonly="" in the DOM but the input field can still be edited.

$(document).ready(function() {

    $("input[name='rdio']").live('click', function() {
        $(".radio_select").find("input[name='rdio']").each(function(){
            if(this.checked)
            {
                $("#"+this.value).removeAttr('disabled');        
            }
            else
            {
                $("#"+this.value).attr('disabled','disabled');
            }
        });
    });
});

Has anyone experienced this behaviour? BTW I'm using jquery 1.4.2

EDIT: Sorry, this was something I have tried and forgot to put it back. So with attr() the problem persists.

Answer 1

It would be pretty interesting in which browser you experience that behavior. Even more interesting would be to know, if not working means, the element does not get disabled, or the attribute is just missing the disabled as value.

Due to W3C there should not be a value for disabled or readonly.

So syntatically

<select disabled></select>

is just fine and correct. No value needed.

Unfortunatly, there is no way to create such a construct with javascript (if you don't want to overwrite the html), so you are forced to add some value. Since both propertys are boolean, you can add pretty much anything. .attr('disabled', 'foobar') is just as good as .attr('disabled', true).

Answer 2

Try using-

$('#target').attr("disabled", true);
$('#target').attr("readonly", true);