How to Add a "Readonly" Attribute to an <Input>

How to add a “readonly” attribute to an input?

jQuery <1.9

$('#inputId').attr('readonly', true);

jQuery 1.9+

$('#inputId').prop('readonly', true);

Read more about difference between prop and attr

How to add the readonly attribute with JQuery or Javascript (BUT following the W3C standard!)

The proper way to do it is with :

$('#someid').prop('readonly', true);

$('#someid').prop('readonly', false);

and

$('#someid').removeProp('readonly');

works fine as well as these are all jQuery methods for the native:

document.getElementById('someid').readOnly = true;

which sets the readonly property appropriately, and if you inspect the element in the console you'll see that the readonly attribute is added without a value like it should be according to the W3C specifications.

readonly is a property, and prop() is the method for setting properties.

The specifications for HTML5 says:

readonly = "readonly" or "" (empty string) or empty

Specifies that element represents a control whose value is not meant to be edited.

this means the following is valid:

<input type="text" readonly />
<input type="text" readonly="" />
<input type="text" readonly="readonly" />

How can i add readonly attribute on all input fields using javascript?

You can use element selector with attribute value selector to select all the textboxes and apply the readonly property to all of the selected elements.

$('input[type="text"]').prop('readonly', true);

To select all the textboxes in the form

$('yourFormSelector input[type="text"]').prop('readonly', true);

As an alternative to attribute value selector, you can also use :text selector to select all textboxes.

$(':text').prop('readonly', true);

How to make a input field readonly with JavaScript?

You can get the input element and then set its readOnly property to true as follows:

document.getElementById('InputFieldID').readOnly = true;

Specifically, this is what you want:

<script type="text/javascript">
  function onLoadBody() {
    document.getElementById('control_EMAIL').readOnly = true;
  } 
</script>

Call this onLoadBody() function on body tag like:

<body onload="onLoadBody">

View Demo: jsfiddle.

Make all inputs with class readOnly

you can do this using this

jQuery <1.9

<script>
    $(function () {
       $('input[type="text"], textarea').attr('readonly','readonly');

    });
</script>

or use this for readonly mode

jQuery 1.9+

 $(function () {
         $('input[type="text"], textarea').prop("readonly",true);

    });

and remove readonly mode

jQuery <1.9

     $(function () {
         $('input[type="text"], textarea').removeAttr('readonly');

    });

</script>

or use this for remove

jQuery 1.9+

 $(function () {
         $('input[type="text"], textarea').prop("readonly",false);

    });

How to dynamically add ng-readonly attribute

You can make use of: Compiler (aka $complie) is an AngularJS service which traverses the DOM looking for attributes. https://docs.angularjs.org/guide/compiler

Something like this should work:

var template = '<input name="clientNames" type="text" class="form-control" ng-readonly="setReadonly" />';
var newClientNameInputBox = angular.element(template);
var $compile = ...; // injected into your code
var scope = ...; // { setReadonly : true }
var parent = ...; // DOM Parent where you want to drop your input    

var compiledElement = $compile(newClientNameInputBox)(scope);
parent.appendChild(compiledElement);

Adding readonly attribute to all form elements

Try this:

$('#form1 input').attr('readonly', 'readonly');

You may want to include more elements #form1 input, #form1 textarea, #form1 select
In jQuery, you usually don't need to iterate over the collection. attr would work for a collection same as for a single element.
In your case, #form1 matched just the <form> element, and each was triggered once, for that element. To find all elements (input or not), you can write #form1 *.

How to Add a "Readonly" Attribute to an <Input>