How can i add readonly attribute on all input fields using javascript?
Solution 1
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);
Solution 2
You can use class
for that
$('.form-control').prop('readonly', true);
Solution 3
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);
Solution 4
this worked for me
<script>
$(function () {
$('input[type="text"]').prop('readonly', true);
});
</script>
Solution 5
Try this:
$('.classname').attr('readonly', 'readonly');
OR you can use this:
$('.classname').prop('readonly', true);
Comments
-
Ayaz Shah almost 2 years
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.