[英]How to enable/disable bootstrap option in select dropdown using javascript/jquery
[英]How to Enable or Disable Bootstrap-Select Dropdown with radiobutton using Javascript and jquery
我有两个单选按钮和一个 Bootstrap-select Dropdown。我想在两个单选按钮的帮助下使用 javascript 启用/禁用下拉菜单。
我的 Html 代码如下:
<div class="container" style="margin-top: 5px;background-color: wheat;">
<div class="card" style="background-color: white;margin: 1em">
<!--<div class="card-header"></div>-->
<div class="card-body">
<div class="row">
<div class="col-lg-2">
<label style="margin-top: 1.2em;margin-left: 1em">Type</label>
</div>
<div class="row" >
<div class="col-sm-1">
<div class="form-check" style="margin-top: 1.1em;margin-left: 1em">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="rbType" id="typeNew" value="enable" >New
</label>
</div>
</div>
<div class="col-sm-2">
<div class="form-check" style="margin-top: 1.1em;margin-left: 1em">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="rbType" id="typeVisisting" value="disable">Visiting
</label>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-2">
<label style="margin-top: 1.2em;margin-left: 1em" for="selectCustomer" >Customer Name</label>
</div>
<div class="col-lg-10">
<div class="form-group" style="margin-top: .5em;margin-right: 1em">
<select class=" form-control input-lg" data-live-search="true" title="-- Select a Customer --" name="selectCustomer" id="selectCustomer" >
<!--<option value="none">-- Select a Customer --</option>-->
@foreach($customers as $customer)
<option value="{{$customer->customer_id}}">{{$customer->customer_id}} {{$customer->customer_name}}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
</div>
请帮我解决这个问题。我在这工作最多三天。
添加下面的jquery
$('input[name="rbType"]').change(function(){
if(this.value == "enable"){
$('#selectCustomer').removeAttr('disabled')
}
if(this.value == "disable"){
$('#selectCustomer').attr('disabled','true')
}
})
使用 jquery 在你的 javascript 标签中试试这个
$('input[name="rbType"]').change(function(){
if(this.value == "enable"){
$('#selectCustomer').prop('disabled',false)
}
if(this.value == "disable"){
$('#selectCustomer').prop('disabled','true')
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.