Add readonly to input fields in jQuery

Question

I have problems adding readonly to some input fields.

I have this code in the <head>

$(document).ready(function() {
    $('#powermail_field_ordreid').prop('readonly', true);
    $('#powermail_field_destination').prop('readonly', true);
});

And then I have these 2 out of 6 input fields, that I need to add the readonly on.

<div id="powermail_fieldwrap_9" class="powermail_fieldwrap powermail_fieldwrap_input powermail_fieldwrap_9 ">
    <label class="powermail_label" for="powermail_field_ordreid"> Ordre id </label>
    <input id="powermail_field_ordreid" class="powermail_field powermail_input " type="text" value="0521104821">
</div>
<div id="powermail_fieldwrap_7" class="powermail_fieldwrap powermail_fieldwrap_input powermail_fieldwrap_7 ">
    <label class="powermail_label" for="powermail_field_destination"> Destination </label>
    <input id="powermail_field_destination" class="powermail_field powermail_input " type="text" value="Luxembourg">
</div>

I have tried .attr() and now im using .prop() because I'm using jQuery 1.10+, but I can still edit the input fields, what's wrong.

...EDIT... Can see its works fine, on jsfiddel - so can someone tell me if its an other script that blok it here http://wnf.dk/bestillingsform.html?tx_powermail_pi1[field][7]=Luxembourg the 2 first fields have the readonlyadd.

As @BenM says, this works fine. Have you checked the console for errors elsewhere in your code? — Rory McCrossan
– Rory McCrossan, Commented May 21, 2014 at 8:59
Are you using duplicate IDs??? Are these elements generated dynamically after DOM is ready? Why don't you set it by default directly on these inputs? BTW, you should try to replicate your issue on jsFiddle — A. Wolff
– A. Wolff, Commented May 21, 2014 at 9:00
thats funny, I can see its working in jsfiddle, but its not working in the main code. @A. Wolff yes i think so, about the generation. — Thomas BP
– Thomas BP, Commented May 21, 2014 at 9:06

Community · Accepted Answer · 2017-05-23 11:58:51Z

2

Your web, console log: Uncaught ReferenceError: $ is not defined

You should put the references to the jquery scripts first. Uncaught ReferenceError: $ is not defined?

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 21, 2014 at 9:45

jandro5

562 bronze badges

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

2 Comments

Frédéric Hamidi Over a year ago

Close, but apparently only the responsive images plugin is missing, not the whole jQuery.

Thomas BP Over a year ago

Hi Frederic i edit the code for 30 min ago, to user2261516, so that worked to switch some of the JS files from footer to header, THX user 2261516

Najib · Accepted Answer · 2014-05-21 09:27:49Z

1

<script>
    $(document).ready(function(){
        $('#powermail_field_ordreid').attr('readonly', true);
        $('#powermail_field_destination').attr('readonly', true);
    });
</script>

it works for jQuery <1.9

jQuery 1.9+

<script>
        $(document).ready(function(){
            $('#powermail_field_ordreid').prop('readonly', true);
            $('#powermail_field_destination').prop('readonly', true);
        });
    </script>

you may look at http://jsfiddle.net/najibcse/M7rkB/

edited May 21, 2014 at 9:27

answered May 21, 2014 at 9:02

Najib

5302 silver badges8 bronze badges

5 Comments

A. Wolff Over a year ago

But OP is using jQuery 1.10+

Frédéric Hamidi Over a year ago

What is the point of your answer? The questioner is already using your second code snippet.

Najib Over a year ago

I have used code.jquery.com/jquery-1.11.1.min.js for test and both attr & prop works for me. @Frédéric Hamidi please look at jsfiddle.net/najibcse/M7rkB

Thomas BP Over a year ago

@Najib U are not reading the question, and see/read what other have wrote.

Najib Over a year ago

@thomas-bog-petersen yap, for the time being I was testing in jsfiddle.

Collectives™ on Stack Overflow

Add readonly to input fields in jQuery

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related