views:

243

answers:

5

Hi,

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');
            }
        });
    });
});

Does anyone expirience 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.

A: 

Try using-

$('#target').attr("disabled", true);
$('#target').attr("readonly", true);
Sadat
that `.attribute()` thingy has to be a typo. It would throw an exception and not cause the described behavior.
jAndy
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');)
Chris-NTA
A: 

I think it should be like this

attr('disabled', true);

and the same for readonly

Pr0fess0rX
+1  A: 

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

jAndy
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.
Chris-NTA
@Chris-NTA: wrong, http://www.jsfiddle.net/hSR7f/3/
jAndy
A: 

.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

derHendrik
A: 

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 !

Paul Dragoonis