选择选项时启用选择，将禁用设置为false不起作用
我想要一个脚本，当选择 Organisaion Name 下拉列表时，该脚本将启用地址和部门下拉菜单。
我的代码：
$(document).ready(function() {
$('#Department1, #Address1').attr('disabled',true);
$('#Organisation1').keyup(function(){
if($(this).val().length !=0)
$('#Department1, #Address1').attr('disabled', false);
else
$('#Department1, #Address1').attr('disabled',true);
})
});
以下是Department Field的标记。
<div class="control-group">
<label class="control-label">Department</label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Department1" >
<button type="button" class="btn" href=""> Find</button>
</div>
<span class="help-inline"><i class="help" title="Enter the Department of this Opportunity.">Help</i></span>
</div>
</div>
完整代码
<style>
.schools-position{
position: relative;
top: 3px;
left: 3px;
}
.groups{
width: 100%;
}
.groups tr{
text-align: center;
}
.groups th{
border-top: 0;
background-color: #f0f0f0;
background-image: url(../../_assets/img/grid/header.png);
background-position: top left;
background-repeat: repeat-x;
font-size: 12px;
font-weight: 600;
padding: 0px 6px;
height: 28px;
line-height: 28px;
overflow: hidden;
}
</style>
<div class="uiModalHeader clearfix">
<h1 class="title jobs"><span class="light">Opportunities :</span> Sandwich</h1>
</div>
<form class="form form-horizontal">
<div class="uiModalBody clearfix">
<ul id="NewOpps_Tabs" class="nav nav-tabs" style="position:absolute;left:10px;right:10px;top:10px;">
<li class="active">
<a href="#NewOpps_tab1"><i class="icon list"></i>General</a>
</li>
</ul>
<div class="tab-content" style="position:absolute;bottom:10px;left:10px;right:10px;top:48px;border:#ddd 1px solid;border-top:0;padding:20px 20px;margin-bottom:0 !important;overflow-y:scroll;">
<fieldset>
<legend>About this Opportunity</legend>
<div class="control-group required">
<label class="control-label">Organisation Name <em>*</em></label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Organisation1">
<button type="button" class="btn" href=""> Find</button>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Department</label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge " id="Department1" >
<button type="button" class="btn" href=""> Find</button>
</div>
<span class="help-inline"><i class="help" title="Enter the Department of this Opportunity.">Help</i></span>
</div>
</div>
<div class="control-group">
<label class="control-label">Address</label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Address1" >
<button type="button" class="btn" href=""> Find</button>
</div>
<span class="help-inline"><i class="help" title="Enter the Address for this Opportunity.">Help</i></span>
</div>
</div>
<hr />
<div class="control-group">
<label class="control-label">Level</label>
<div class="controls">
<select class="input-xxlarge" id="Level">
<option>-- Please Select --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="PLCMNT">PLCMNT</option>
<option value="OTHER">OTHER</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Academic Year</label>
<div class="controls">
<select class="input-xxlarge" id="Academic Year">
<option>-- Please Select --</option>
<option value="2019/20">2019/20</option>
<optio vaue="2018/19">2018/19</optio>
<option value="2017/18">2017/18</option>
<option value="2016/17" selected="">2016/17</option>
<option value="2015/16">2015/16</option>
<option value="2014/15">2014/15</option>
<option value="2013/12">2013/12</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Vacancies</label>
<div class="controls">
<textarea rows="2" cols="20">
</textarea>
<span class="help-inline"><i class="help" title="Enter the Vacancies for this Opportunity.">Help</i></span>
</div>
</div>
<div class="control-group required">
<label class="control-label">Source<em>*</em></label>
<div class="controls">
<select class="input-xxlarge" id="Academic Year">
<option>-- Please Select --</option>
<option value="Student Found" selected="selected">Student Found</option>
<option value="University Found">University Found</option>
<option value="Alumni Relationship">Alumni Relationship</option>
<option value="School Relationship">School Relationship</option>
<option value="Found on Website">Found on Website</option>
</select>
</div>
</div>
<hr />
<div class="control-group required">
<label class="control-label">Job Title <em>*</em></label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Job-Title">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Job Description</label>
<div class="controls">
<div class="input-append input-prepend">
<textarea rows="5" class="input-xxlarge txtStage1">
</textarea>
</div>
</div>
</div>
<div class="control-group required">
<label class="control-label">Duration <em>*</em></label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Duration">
</div>
</div>
</div>
<div class="control-group required">
<label class="control-label">Duration Measure <em>*</em></label>
<div class="controls">
<select class="input-xxlarge" id="Duration-Measure">
<option>-- Please Select --</option>
<option value="Days">Days</option>
<option value="Weeks">Weeks</option>
<option value="Months">Months</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Salary</label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Salary">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Working Hours</label>
<div class="controls">
<div class="input-append input-prepend">
<textarea class="input-xxlarge">
</textarea>
</div>
</div>
</div>
<hr />
<div class="control-group">
<label class="control-label">Category</label>
<div class="controls">
<select class="input-xxlarge" id="Category">
<option>-- Please Select --</option>
<option value="1">Accountancy, Banking and Finance</option>
<option value="2">Animal and Plant Resource</option>
<option value="3">Business, Consulting and Management</option>
<option value="4">Charity and Voluntary Work</option>
<option value="5">Creative Arts and Design</option>
<option value="6">Energy and Utilities</option>
<option value="7">Engineering and Manufacturing</option>
<option value="8">Enviromemt amd Agriculture</option>
<option value="9">Healthcare</option>
<option value="10">Hospitality and Events Management</option>
<option value="11">Information, Research and Analysis</option>
<option value="12">Insurance and Pensions</option>
<option value="13">Law</option>
<option value="14">Law Enforcement and Security</option>
<option value="15">Leisure, Sport and Tourism</option>
<option value="16">Marketing, Advertising and PR</option>
<option value="17">Media and Internet</option>
<option value="18">Performing Arts</option>
<option value="19">Property and Construction</option>
<option value="20">Public Services and Administration</option>
<option value="21">Publishing and Journalism</option>
<option value="22">Recruitment and HR</option>
<option value="23">Retail</option>
<option value="24">Sales</option>
<option value="25">Science and Pharmaceuticals</option>
<option value="26">Social Care</option>
<option value="27">Teaching and Education</option>
<option value="28">Transport and Logistics</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Nearest Train or Tube Station</label>
<div class="controls">
<select class="input-xxlarge" id="Category">
<option>-- Please Select --</option>
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
</select>
</div>
</div>
<div class="control-group required">
<label class="control-label">Placement Type Offered<em>*</em></label>
<div class="controls">
<select class="input-xxlarge" id="Placment-Type-Offered">
<option>-- Please Select --</option>
<option value="Placement Year">Placement Year</option>
<option value="Internship">Internship</option>
<option value="Convention de Stage">Convention de Stage</option>
<option value="Work Study">Work Study</option>
<option value="Social Work 1">Social Work 1</option>
<option value="Social Work 2">Social Work 2</option>
<option value="Social Work 3">Social Work 3</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
<div class="uiModalButtons clearfix">
<div class="pull-right">
<div class="btn-group">
<button class="uiButton"><span class="icon cancel">Cancel</span></button>
</div>
<div class="btn-group">
<a class="uiAjaxModal" href="<?php echo $appurl; ?>../../Admin/Things2/stage2.php"><button class="uiButton"><span class="icon save">Next</span></button></a>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#Department1, #Address1').attr('disabled',true);
$('#Organisation1').change(function(){
if($(this).val() !='')
$('#Department1, #Address1').removeAttr('disabled');
else
$('#Department1, #Address1').attr('disabled','disabled');
});
});
$(document).ready(function() {
$(document).on("keypress", "#Organisation", function(){
if($("#Organisation").val() !=0 || $("#Organisation").val()!=NULL)
{
$("#Department").removeAttr("disabled");
$("#Address").removeAttr("disabled");
}
else
{
$("#Department").attr("disabled",true);
$("#Address").attr("disabled",true);
}
});
$('#Organisation1').select2({
data: [{
id: "1",
text: "Organisation 1"
}, {
id: "2",
text: "Organisation 2"
}, {
id: "3",
text: "Organisation 3"
}, {
id: "4",
text: "Organisation 4"
}],
multiple: false,
placeholder: '-- Please Select',
allowClear: true
});
$('#Department1').select2({
data: [{
id: "1",
text: "Department 1"
}, {
id: "2",
text: "Department 2"
}, {
id: "3",
text: "Department 3"
}, {
id: "4",
text: "Department 4"
}],
multiple: false,
placeholder: '-- Please Select',
allowClear: true
});
$('#Address1').select2({
data: [{
id: "1",
text: "Address 1"
}, {
id: "2",
text: "Address 2"
}, {
id: "3",
text: "Address 3"
}, {
id: "4",
text: "Address 4"
}],
multiple: false,
placeholder: '-- Please Select',
allowClear: true
});
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$('.schools-check').each(function() {
this.checked = true;
});
}
else {
$('.schools-check').each(function() {
this.checked = false;
});
}
});
$('.choose').on('click', function(e){
e.preventDefault();
$('.uiModalContent').html('').addClass('loading');
$.ajax({
url: $(this).attr('href'),
success: function(data) {
setTimeout(function(){
$('.uiModalContent').removeClass('loading');
$('.uiModalContent').html(data);
}, 500);
}
});
});
});
</script>
以下是整个模态的代码
3 个答案:
答案 0 :(得分：1)
使用removeAttr()而不是将已禁用的attr设置为false
$(document).ready(function() {
var els = $('#Department1, #Address1');
els.attr('disabled',true);
$('#Organisation1').change(function(){
$(this).val() ? els.removeAttr('disabled') : els.attr('disabled', '');
});
});
https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes
元素上存在布尔属性表示true value，缺少属性表示false值。
答案 1 :(得分：0)
如果组织是选择框，则可以根据组织选择更改启用/禁用：
$('#Organisation1').change(function(){
if($(this).val() !='')
$('#Department1, #Address1').removeAttr('disabled');
else
$('#Department1, #Address1').attr('disabled','disabled');
});
答案 2 :(得分：-1)
$('#Organisation1').blur(function() {
if ($(this).val() != '')
$('#Department1, #Address1').removeAttr('disabled')
else
$('#Department1, #Address1').attr('disabled', 'disabled');
})
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？