javascript - 如何使选择选项禁用
问题描述
如何使选择选项只读。当我输入当前地址时，它应该出现在永久地址中，这工作正常，当我选中复选框时，文本框被禁用（只读），但下拉菜单是可编辑的。如何使选择选项只读。
$('#addressInfo input:text').attr('disabled', 'disabled'); // disabled the textboxes<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #b3daff;">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <span style="font-weight: 700;">Address
Details</span> <span class="glyphicon glyphicon-plus" style="color: darkred"> </span>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<!--Input for personal details--->
<div class="col-sm-4 col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-8">Current
</label>
</div>
</div>
</div>
<br /> <br />
<!-- Address line 1 -->
<div class="col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Address Line 1<span
style="color: red;">*</span></label>
<div class="col-md-9">
<input type="text" class="form-control" id="addressLine1" required placeholder="Address Line 1" />
</div>
</div>
</div>
</div>
<!--end tag for address line 1 -->
<br /> <br />
<!-- Address line 2 -->
<div class="col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Address Line 2</label>
<div class="col-md-9">
<input type="text" class="form-control" id="addressLine2" required placeholder="Address Line 2" />
</div>
</div>
</div>
</div>
<!--end tag for address line 1 -->
<br /> <br />
<!--city/town code-->
<div class="col-sm-4 col-md-5">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-4">City/Town<span
style="color: red;">*</span>
</label>
<div class="col-md-12">
<select id="city" class="form-control" required oninvalid="this.setCustomValidity('City Required')" oninput="this.setCustomValidity('')" />
<option hidden value="">City/Town</option>
<option value="bng">Bangalore</option>
<option value="mng">Mangalore</option>
<option value="bl">Ballari</option>
</select>
</div>
</div>
</div>
</div>
<!----State-->
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-4">State<span
style="color: red;">*</span>
</label>
<div class="col-md-12">
<select id="state" class="form-control" required oninvalid="this.setCustomValidity('City Required')" oninput="this.setCustomValidity('')" />
<option hidden value="">State</option>
<option value="kn">Karnataka</option>
<option value="an">Andra Pradesh</option>
<option value="nd">New Delhi</option>
<option value="mb">Mumbai</option>
</select>
</div>
</div>
</div>
</div>
<!--end of state code-->
<div class="col-sm-4 col-md-3">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-8">Pin
Code<span style="color: red;">*</span>
</label>
<div class="col-md-12">
<input type="text" class="form-control" id="pincode" required placeholder="Pin Code" />
</div>
</div>
</div>
</div>
<br /><br /><br />
<!----State-->
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-4">Country<span
style="color: red;">*</span>
</label>
<div class="col-md-12">
<select id="country" name="country" class="form-control" required oninvalid="this.setCustomValidity('Country Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Country</option>
<option value="in">India</option>
</select>
</div>
</div>
</div>
</div>
<br /> <br /> <br /> <br />
<div class="col-sm-4 col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-12">Permanent
Same
as above <input type="checkbox" id="chk">
</label>
</div>
</div>
</div>
<!--Input for personal details--->
<br /> <br /> <br />
<!-- Address line 1 -->
<div id="addressInfo">
<div class="col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Address Line 1<span
style="color: red;">*</span></label>
<div class="col-md-9">
<input type="text" class="form-control" id="address1" required placeholder="Address Line 1" />
</div>
</div>
</div>
</div>
<!--end tag for address line 1 -->
<br /> <br />
<!-- Address line 2 -->
<div class="col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Address Line 2</label>
<div class="col-md-9">
<input type="text" class="form-control" id="address2" required placeholder="Address Line 2" />
</div>
</div>
</div>
</div>
<!--end tag for address line 1 -->
<br /> <br />
<!--city/town code-->
<div class="col-sm-4 col-md-5">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-4">City/Town<span
style="color: red;">*</span>
</label>
<div class="col-md-12">
<select id="inputCity" name="inputCity" class="form-control" required oninvalid="this.setCustomValidity('City Required')" oninput="this.setCustomValidity('')" />
<option hidden value="">City/Town</option>
<option value="bng">Bangalore</option>
<option value="mng">Mangalore</option>
<option value="bl">Ballari</option>
</select>
</div>
</div>
</div>
</div>
<!----State-->
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-4">State<span
style="color: red;">*</span>
</label>
<div class="col-md-12">
<select id="inputState" name="inputState" class="form-control" required oninvalid="this.setCustomValidity('City Required')" oninput="this.setCustomValidity('')">
<option hidden value="">State</option>
<option value="kn">Karnataka</option>
<option value="an">Andra Pradesh</option>
<option value="nd">New Delhi</option>
<option value="mb">Mumbai</option>
</select>
</div>
</div>
</div>
</div>
<!--end of state code-->
<div class="col-sm-4 col-md-3">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-8">Pin
Code<span style="color: red;">*</span>
</label>
<div class="col-md-12">
<input type="text" class="form-control" id="inputPincode" required placeholder="Pin Code" />
</div>
</div>
</div>
</div>
<br /><br /><br />
<!----State-->
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-4">Country<span
style="color: red;">*</span>
</label>
<div class="col-md-12">
<select id="inputCountry" name="inputCountry" class="form-control" required oninvalid="this.setCustomValidity('City Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Country</option>
<option value="in">India</option>
</select>
</div>
</div>
</div>
</div>
<br /> <br /><br />
</div>
</div>
</div>
</div>
</div>
<!----Ends second column-------->解决方案
像这样：
$('#addressInfo').find('input:text').attr('disabled', 'disabled');
或者 ：
$('#addressInfo').find('input:text').eq(0).attr('disabled', 'disabled');
//for first found input
禁用选择：
$('#inputCountry').attr('disabled', 'disabled');
禁用第一个选项：
$('#inputCountry').find('option').eq(0).attr('disabled', 'disabled');
推荐阅读
- android - TextView，如何为用户显示提示
- c# - asp.net core post api总是收到null
- selenium - 如何处理 selenium webdriver 中的 span 类下拉菜单
- rest - 有人再使用 From HTTP 请求标头了吗？
- java - JPA Annotation @Column(insertable=false) 被忽略，为什么？
- ios - Swift IOS 问题从 MasterView 更新 DetailView 中的标签
- php - 使用正则表达式删除 CSV 中的额外制表符分隔符
- ubuntu - 坚持在 squid 代理设置中下一步该做什么
- c# - 什么用于即时消息功能？
- opencv - 为什么OpenCV在调整大小时会切换形状？