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

Question

I want to add readonly attribute on all input fields using javascript. I have done for single input field using this $('#someid').prop('readonly', true); but I want to add to all input field in Edit Mode.

Input Fields

<div class="form-group">
    <label for="Barcode">Barcode: </label>
    <input name="Barcode" id="Barcode" class="form-control" value="<?=$data['Barcode']?>" placeholder="Barcode">
</div>
<div class="form-group">
    <label for="ApplicantName">ApplicantName: </label>
    <input name="ApplicantName" id="ApplicantName" class="form-control" value="<?=$data['ApplicantName']?>" placeholder="ApplicantName">
</div>
<div class="form-group">
    <label for="SubBarcode">Reference No: </label>
    <input name="SubBarcode" id="SubBarcode" class="form-control" value="<?=$data['SubBarcode']?>" placeholder="Reference No">
</div>
<div class="form-group">
    <label for="ClientName">Client Name: </label>
    <input name="ClientName" id="ClientName" class="form-control" value="<?=$data['ClientName']?>" placeholder="Client Name">
</div>
<div class="form-group">
    <label for="ClientRefNo">Client Reference No: </label>
    <input name="ClientRefNo" id="ClientRefNo" class="form-control" value="<?=$data['ClientRefNo']?>" placeholder="Client Reference No">
</div>
<div class="form-group">
    <label for="DateOfBirth">Date Of Birth: </label>
    <input name="DateOfBirth" id="DateOfBirth" class="datetimepicker-month form-control" value="<?=$data['DateOfBirth']?>" placeholder="Date Of Birth">
</div>
<div class="form-group">
    <label for="PassportNo">Passport No: </label>
    <input name="PassportNo" id="PassportNo" class="datetimepicker-month form-control" value="<?=$data['PassportNo']?>" placeholder="Passport No">
</div>
<div class="form-group">
    <label for="AKAName">AKAName: </label>
    <input name="AKAName" id="AKAName" class="datetimepicker-month form-control" value="<?=$data['AKAName']?>" placeholder="AKAName">
</div>
<div class="form-group">
    <label for="Gender">Gender: </label>
    <input name="Gender" id="Gender" class="datetimepicker-month form-control" value="<?=$data['Gender']?>" placeholder="Gender">
</div>
<div class="form-group">
    <label for="Nationality">Nationality: </label>
    <input name="Nationality" id="Nationality" class="datetimepicker-month form-control" value="<?=$data['Nationality']?>" placeholder="Nationality">
</div>
<div class="form-group">
    <label for="ArabicName">Arabic Name: </label>
    <input name="ArabicName" id="ArabicName" class="datetimepicker-month form-control" value="<?=$data['ArabicName']?>" placeholder="Arabic Name">
</div>

Is there any short way that i can dynamically add read-only attribute to all input fields.

Tushar · Accepted Answer · 2015-09-21 07:51:48Z

7

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

edited Sep 21, 2015 at 7:51

answered Sep 21, 2015 at 7:46

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

Comments

Arjun · Accepted Answer · 2015-09-21 07:47:50Z

4

You can use class for that

$('.form-control').prop('readonly', true);

answered Sep 21, 2015 at 7:47

Arjun

1,4391 gold badge13 silver badges33 bronze badges

Comments

Aru · Accepted Answer · 2015-09-21 07:48:10Z

1

you can specify a common class (recommended) or just globally target all the input elements in the form (not recommended)

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

answered Sep 21, 2015 at 7:48

Aru

1,8701 gold badge13 silver badges15 bronze badges

Comments

Yogesh Shakya · Accepted Answer · 2015-09-21 13:29:02Z

1

Try this:

$('.classname').attr('readonly', 'readonly');

OR you can use this:

$('.classname').prop('readonly', true);

edited Sep 21, 2015 at 13:29

answered Sep 21, 2015 at 8:03

Yogesh Shakya

3553 silver badges15 bronze badges

Comments

Manuel de Jesus Ramos Saballos · Accepted Answer · 2022-01-25 02:25:38Z

1

this worked for me

 <script>
    $(function () {
        $('input[type="text"]').prop('readonly', true);
    });
</script>

answered Jan 25, 2022 at 2:25

Manuel de Jesus Ramos Saballos

232 bronze badges

Collectives™ on Stack Overflow

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

Input Fields

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Input Fields

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related