Question

我想使用javascript在所有输入字段上添加readonly属性。我使用此$('#someid').prop('readonly', true);完成了单个输入字段，但我想在编辑模式下添加到所有输入字段。

输入字段

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

是否有任何简短的方法可以动态地将只读属性添加到所有输入字段。

Answer 1

您可以使用带有属性值选择器的元素选择器来选择所有文本框，并将readonly属性应用于所有选定的元素。

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

选择表单中的所有文本框

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

作为属性值选择器的替代方法，您还可以使用:text选择器选择所有文本框。

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

Answer 2

您可以class使用

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

Answer 3

您可以指定一个公共类（推荐）或只是全局定位表单中的所有输入元素（不推荐）

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

Answer 4

试试这个：

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

或者您可以使用此：

$（＆＃39; .classname＆＃39;）。prop（＆＃39; readonly＆＃39;，true）;

如何使用javascript在所有输入字段上添加readonly属性？

输入字段

4 个答案: