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.

it writes only disabled="" but is it not working? I mean did the element get disabled or not? — Reigel Gallarde
– Reigel Gallarde, Commented Jul 27, 2010 at 9:04
Reigel. Yes it only writes disabled="" and does not disable the input field. If I manualy (Firebug) add disabled in the value part then it disables the input field. — Chris-NTA
– Chris-NTA, Commented Jul 27, 2010 at 9:13
After reading this a third time, I still don't know what your problem is. Are you complaining about the missing value or does it fail to actually disable the element? — jAndy
– jAndy, Commented Jul 27, 2010 at 9:13

jAndy · Accepted Answer · 2010-07-27 09:08:24Z

4

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

edited Jul 27, 2010 at 9:08

answered Jul 27, 2010 at 9:03

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris-NTA Over a year ago

I'm using FF 3.6. This is what I get: disabled="" in the DOM. If you only put disabled in is not working. I guess "disabled" is a attribute and needs a value.

Sadat · Accepted Answer · 2010-07-27 08:57:59Z

2

Try using-

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

answered Jul 27, 2010 at 8:57

Sadat

3,4812 gold badges33 silver badges45 bronze badges

2 Comments

jAndy Over a year ago

that .attribute() thingy has to be a typo. It would throw an exception and not cause the described behavior.

Chris-NTA Over a year ago

Doesn't work. I have tried different ways. The only way it works, is when I use purley javascript (document.forms['form'].target.setAttribute('disabled','disabled');)

Ahmed Magdy · Accepted Answer · 2010-07-27 09:00:11Z

0

I think it should be like this

attr('disabled', true);

and the same for readonly

answered Jul 27, 2010 at 9:00

Ahmed Magdy

6,0888 gold badges46 silver badges77 bronze badges

Comments

Alfred · Accepted Answer · 2012-08-18 07:17:10Z

0

.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

edited Aug 18, 2012 at 7:17

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

answered Jul 27, 2010 at 9:17

larrydahooster

4,1634 gold badges42 silver badges48 bronze badges

Comments

Alfred · Accepted Answer · 2012-08-18 07:18:00Z

0

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 !

edited Aug 18, 2012 at 7:18

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

answered Jul 27, 2010 at 10:16

Paul Dragoonis

2,3311 gold badge16 silver badges22 bronze badges

Comments

Dan Chadwick · Accepted Answer · 2014-05-29 14:38:53Z

0

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

answered May 29, 2014 at 14:38

Dan Chadwick

3813 silver badges7 bronze badges

Collectives™ on Stack Overflow

Jquery disable input with attr()

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related