如何使选择选项只读。当我输入当前地址时，它应该出现在永久地址中，这工作正常，当我选中复选框时，文本框被禁用（只读）但下拉是可编辑的。如何使选择选项只读。
$('#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-------->
答案 0 :(得分：0)
像这样：
$('#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');
答案 1 :(得分：0)
尝试使用以下jquery语句来禁用选择字段选项：
$('#addressInfo select').find('option').attr('disabled', 'disabled');
答案 2 :(得分：0)
您需要在复选框中添加一个监听器并评估其是否已选中
我将ID same添加到复选框
$('#same').change(function(){
if(this.checked) {
您可以使用相同的attr功能。只需调整选择器
$('#addressInfo select').attr('disabled', 'disabled');
希望这会有所帮助：＆gt;
$('#same').change(function(){
if(this.checked) {
$('#addressInfo input:text').attr('disabled', 'disabled');
$('#addressInfo select').attr('disabled', 'disabled');
}
})<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 id="same" 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-------->
答案 3 :(得分：0)
我希望这可以帮到你：
$( '#chk' ).on( 'click', function ( e ) {
if ( this.checked ) {
$( '#permanent input[type="text"]' ).each( function ( index ) {
$( this ).attr( 'disabled', 'disabled' ).val( $( '#current input[type="text"]' ).eq( index ).val() );
} )
$( '#permanent select' ).each( function ( index ) {
$( this ).attr( 'disabled', 'disabled' ).val( $( '#current select' ).eq( index ).val() );
} )
} else {
$( '#permanent input[type="text"], #permanent select' ).each( function ( index ) {
$( this ).removeAttr( 'disabled' ).val( '' );
} )
}
} ).required {
color: red
}
ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
grid-gap: 10px;
}
p {
background-color: #ddd
}
.form-group {
padding-bottom: 5px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="current">
<p>Current</p>
<div class="form-group">
<label for="addressLine1">Address Line 1 <em class="required">*</em></label>
<input type="text" id="addressLine1" placeholder="Address Line 1" required />
</div>
<div class="form-group">
<label for="addressLine2">Address Line 2</label>
<input type="text" id="addressLine2" placeholder="Address Line 2" required />
</div>
<div class="form-group">
<label for="city">City/Town <em class="required">*</em> </label>
<select id="city" required />
<option hidden value="">City/Town</option>
<option value="bng">Bangalore</option>
<option value="mng">Mangalore</option>
<option value="bl">Ballari</option>
</select>
</div>
<div class="form-group">
<label for="state">State <em class="required">*</em></label>
<select id="state" required />
<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 class="form-group">
<label for="pincode">Pin Code <em class="required">*</em></label>
<input type="text" id="pincode" placeholder="Pin Code" required />
</div>
<div class="form-group">
<label for="country">Country <em class="required">*</em></label>
<select id="country" name="country" required>
<option hidden value="">Country</option>
<option value="in">India</option>
</select>
</div>
</li>
<li id="permanent">
<p>
Permanent (
<input type="checkbox" id="chk">
<label for="chk" class="control-label col-sm-12 col-md-12">Same as Current</label>
)
</p>
<div class="form-group">
<label for="address1">Address Line 1 <em class="required">*</em></label>
<input type="text" id="address1" placeholder="Address Line 1" required />
</div>
<div class="form-group">
<label for="address2">Address Line 2</label>
<input type="text" id="address2" placeholder="Address Line 2" />
</div>
<div class="form-group">
<label for="inputCity">City/Town <em class="required">*</em></label>
<select id="inputCity" name="inputCity" required />
<option hidden value="">City/Town</option>
<option value="bng">Bangalore</option>
<option value="mng">Mangalore</option>
<option value="bl">Ballari</option>
</select>
</div>
<div class="form-group">
<label for="inputState">State <em class="required">*</em></label>
<select id="inputState" name="inputState" required >
<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 class="form-group">
<label for="inputPincode">Pin Code <em class="required">*</em></label>
<input type="text" id="inputPincode" placeholder="Pin Code" required />
</div>
<div class="form-group">
<label for="inputCountry">Country <em class="required">*</em></label>
<select id="inputCountry" name="inputCountry" required>
<option hidden value="">Country</option>
<option value="in">India</option>
</select>
</div>
</li>
</ul>