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

Table of Contents

Issue

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.

Solution

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

Answered By – Tushar

Answer Checked By – Timothy Miller (BugsFixing Admin)

Leave a Reply

Your email address will not be published.