我有一个文本框#Email,我有两个下拉列表菜单,#Carrier和#Phones.当输入电子邮件时,我想只启用Carriers下拉框而不启用电话.选择操作符后,必须启用电话下拉列表.只有在选择了电子邮件和操作符时,才能启用电话下拉列表.如果用户输入电子邮件并从#carriers和#phones中选择项目,然后删除电子邮件,则必须禁用两个下拉菜单.我希望它工作的方式是当用户从#carriers和#phones中选择项目然后删除电子邮件时,必须禁用下拉菜单并将其设置回默认值.现在它只会禁用但不会将它们恢复为默认值.
<!-- Will check for e-mail and enable #carrires dropdownlist, otherwise, it will disable dropdownlist for #Carriers-->
<script>
$(document).ready(function () {
$('#Email').on('input change', function () { //check to see if email is empty
if ($(this).val() == '') {
$('#Carriers').prop('disabled', true);//disable carriers when there is no email
$('#Phones').prop('disabled', true); //will keep Phones disabled when there is no email
}
else {
$('#Carriers').prop('disabled', false);
}
});
});
<!-- Will check for Carriers selected and enable the Phones dropdown list-->
<script>
$(document).ready(function () { //check if carriers is selected
$('#Carriers').change(function () {
if ($('#Carriers').val() == '') { //if empty
$('#Phones').prop('disabled', true); //disable
}
else {
$('#Phones').prop('disabled', false); //enable
}
});
});
<!--this row carrier and phones-->
<div class="form-group">
<div class="col-lg-1 col-lg-offset-1 col-md-1 col-sm-1">
@Html.LabelFor(model => model.Carriers)
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
@Html.DropDownListFor(model => model.Carriers, new SelectList(ViewBag.Carriers, "ID", "Carrier1"), "Select a Carrier", new
{
@disabled = "disabled",
data_bind = "value: Request.Carriers",
@class = "form-control",
data_width = "95%",
data_toggle = "tooltip",
data_placement = "top",
title = "Requested Plan Carrier"
})
@Html.ValidationMessageFor(model => model.Carriers, "", new { @class = "text-danger" })
</div>
<div class="col-lg-1">
@Html.LabelFor(model => model.Phones)
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
@Html.DropDownListFor(model => model.Phones, new SelectList(ViewBag.Phones as System.Collections.IEnumerable, "PhoneID", "Name"), "Select a Phone", new
{
@disabled = "disabled",
data_bind = "value: Request.Phones",
@class = "form-control",
data_width = "95%",
data_toggle = "tooltip",
data_placement = "top",
title = "Requested Equipment"
})
@Html.ValidationMessageFor(model => model.Phones, "", new { @class = "text-danger" })
</div>
最佳答案 所以我写了一些东西,如果文本框中有输入,那么它将启用两个选择的按钮,如果没有,那么它不仅会禁用,而且还会将下拉框重置为默认值.
我希望你喜欢它,如果你需要更多的帮助,请评论.
$(document).ready(function () {
$('#Email').on('input', function () { //check to see if email is empty
if ($(this).val() == '') {
$('#Carrier, #Phones')
.prop('disabled', true).each(function () {
$(this).val($(this).find("option:first").val());
});
} else {
$('#Carrier')
.prop('disabled', false);
}
});
$("#Carrier").on('input', function () {
$("#Phones").prop('disabled',false);
});
$("#Email").trigger('input');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<select id="Carrier">
<option value="default">Please select a carrier</option>
<option value="1">AT&T</option>
<option value="2">Verizon</option>
<option value="3">Cricket</option>
<option value="4">Ting</option>
<option value="5">Sprint</option>
</select>
<select id="Phones">
<option value="default">Please select a device</option>
<option value="1">Android</option>
<option value="2">iPhone</option>
<option value="3">Blackberry</option>
</select>
<input type="text" id="Email" />