当我点击复选框时如何启用临时地址中的状态字段？
问题描述：
当我进入Permanent Address然后我点击复选框Permanent Address值将显示在Temporary Address领域，但沙爹场未在Temporary Address字段绑定当我点击复选框时如何启用临时地址中的状态字段？
<h5 class="with-border">Permanent Address </h5>
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Address line 1</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.PAddress1, new { @class = "form-control", @id = "txtPPAddress1", placeholder = "Address Line1" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Address Line2</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.PAddress2, new { @class = "form-control", @id = "txtPPAddress2", placeholder = "Address Line2" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Country</label>
@Html.DropDownList("CountryNew", null, "--- Select Country ---", new { @class = "select2-arrow" })
</fieldset>
</div>
</div><!--.row-->
<br />
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">State</label>
<select id="stateNew" class="select2-arrow"></select>
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">City</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.PCity, new { @class = "form-control", @id = "txtPPCity", placeholder = "City" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Pincode</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.PPinCode, new { @class = "form-control", @id = "txtPPPinCode", placeholder = "Pincode" })
</fieldset>
</div>
</div><!--.row-->
<br />
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Land Mark</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.PLandMark, new { @class = "form-control", @id = "txtPPLandMark", placeholder = "Land Mark" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Phone No</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.PPhoneNo, new { @class = "form-control", @id = "txtPPPhoneNo", placeholder = "Phone Number" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Mobile Number</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.PMobileNo, new { @class = "form-control", @id = "txtPPMobileNo", placeholder = "Mobile Number" })
</fieldset>
</div>
</div><!--.row-->
<br />
<br />
<div class="checkbox">
<input type="checkbox" id="check-1">
<label for="check-1">Billing Address is same as Shipping Address.</label>
</div>
<br />
<br />
<h5 class="with-border">Temporary Address </h5>
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Address line 1</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.TAddress1, new { @class = "form-control", @id = "txtTAddress1", placeholder = "Address Line1" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Address Line2</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.TAddress2, new { @class = "form-control", @id = "txtTAddress2", placeholder = "Address Line2" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Country</label>
@Html.DropDownList("CountryNew1", null, "--- Select Country ---", new { @class = "select2-arrow" })
</fieldset>
</div>
</div><!--.row-->
<br />
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">State</label>
<select id="stateNew1" class="select2-arrow"></select>
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">City</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.TCity, new { @class = "form-control", @id = "txtTCity", placeholder = "City" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Pincode</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.TPinCode, new { @class = "form-control", @id = "txtTPinCode", placeholder = "Pincode" })
</fieldset>
</div>
</div><!--.row-->
<br />
<div class="row">
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Land Mark</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.TLandMark, new { @class = "form-control", @id = "txtTLandMark", placeholder = "Land Mark" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Phone No</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.TPhoneNo, new { @class = "form-control", @id = "txtTPhoneNo", placeholder = "Phone Number" })
</fieldset>
</div>
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold control-label">Mobile Number</label>
@Html.TextBoxFor(model => model.pharmaCompanyDivision.TMobileNo, new { @class = "form-control", @id = "txtTMobileNo", placeholder = "Mobile Number" })
</fieldset>
</div>
</div><!--.row-->
脚本：
$(document).ready(function() {
$('input:checkbox[id*=check-1]').change(function() {
if ($(this).is(':checked')) {
$('input:text[id*=txtTAddress1]').val($('input:text[id*=txtPPAddress1]').val());
$('input:text[id*=txtTAddress2]').val($('input:text[id*=txtPPAddress2]').val());
$('select[id*=CountryNew1]').val($('select[id*=CountryNew]').val());
$('select[id*=stateNew1]').val($('select[id*=stateNew]').val());
$('input:text[id*=txtTCity]').val($('input:text[id*=txtPPCity]').val());
$('input:text[id*=txtTPinCode]').val($('input:text[id*=txtPPPinCode]').val());
$('input:text[id*=txtTLandMark]').val($('input:text[id*=txtPPLandMark]').val());
$('input:text[id*=txtTPhoneNo]').val($('input:text[id*=txtPPPhoneNo]').val());
$('input:text[id*=txtTMobileNo]').val($('input:text[id*=txtPPMobileNo]').val());
}
else {
$('input:text[id*=txtTAddress1]').val('');
$('input:text[id*=txtTAddress2]').val('');
$('select[id*=CountryNew1]').val('');
$('select[id*=stateNew1]').val('');
$('select[id*=txtTCity]').val('');
$('select[id*=txtTPinCode]').val('');
$('select[id*=txtTLandMark]').val('');
$('select[id*=txtTPhoneNo]').val('');
$('select[id*=txtTMobileNo]').val('');
}
});
});
图片
状态绑定代码示例：
$("#CountryNew").change(function() {
var id = $(this).val();
$("#stateNew").empty();
$.get("State_BindNew", { CountryID: id }, function (data) {
var v = "<option>--- Select State ---</option>";
$.each(data, function (i, v1) {
v += "<option value=" + v1.Value + ">" + v1.Text + "</option>";
});
$("#stateNew").html(v);
});
});
$("#CountryNew1").change(function() {
var id = $(this).val();
$("#stateNew1").empty();
$.get("State_BindNew1", { CountryID: id }, function (data) {
var v = "<option>--- Select State ---</option>";
$.each(data, function (i, v1) {
v += "<option value=" + v1.Value + ">" + v1.Text + "</option>";
});
$("#stateNew1").html(v);
});
});
答
当CountryNew1值发生变化时，stateNew1下拉的选项通过ajax获取。阿贾克斯需要一些时间才能完成。所以，即使在加载选项之前，您基本上仍然在设置stateNew1的值。
您可以通过在之后设置stateNew1的值来修复此选项。更改CountryNew1的变化事件：
$("#CountryNew1").change(function() {
var id = $(this).val();
$("#stateNew1").empty();
$.get("State_BindNew1", { CountryID: id }, function (data) {
var v = "<option>--- Select State ---</option>";
$.each(data, function (i, v1) {
v += "<option value=" + v1.Value + ">" + v1.Text + "</option>";
});
$("#stateNew1").html(v);
// check of checkbox is checked
if($('#check-1').is(":checked")) {
$("#stateNew1").val($('#stateNew').val()); // set the "stateNew" value to "stateNew1"
}
});
});
而你并不需要使用Attribute Contains Selector，如果你有确切的id值。
删除您收到良好答案的问题对那些花时间帮助您的人是不尊重的。出于这个原因，我已经取消了这个问题。不要形成这种模式，否则你会发现自己无法提出任何问题。 –