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

.attr('disabled', 'disabled'); does a good job.

The W3C specification says you have to set the attribute without a value. But thats a jquery attr() function problem. You can't set an attribute without a value.

It writes disabled="" in the DOM. But it is working pretty fine.

See here: http://www.w3schools.com/tags/att_input_disabled.asp

Answer 2

I think it should be like this

attr('disabled', true);

and the same for readonly

Answer 3

@OP: I suspect the button is functionally disabled but visually not disabled.

I experienced exactly the same symptoms. Using attr('disabled', 'disabled') yielded disabled="" in the DOM. The button was in fact disabled in that it no longer generated a click event nor submitted the form. However it was still being highlighted as if it were.

The cause was the CSS for the button, which contained the pseudo-selector ':active'. This is being applied even though the button is disabled. Adding ':not([DISABLED])' to active removed the misleading highlighting.

To any Drupal users, the Seven theme has this CSS and Seven is the default administrative theme.

I verified this in FF and Chrome.

Answer 4

Doing .attr('disabled', true/false); and the same with readonly is the quickest approach. However, do remember that if an element is "disabled" it will not appear in the forms submit data, whereas readonly will appear in the post data. This is a common pitfall for developers to want to disable input but then wonder why they don't get their $_POST data in PHP.

Just a little heads up !

Answer 5

Try using-

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

Answer 6

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).