使用JavaScript禁用复选框的下拉菜单
[英]Disable a drop down menu by a checkbox using javascript
问题描述
我编写了这段代码，以创建具有多个选项的下拉列表。 我添加了另一个复选框以启用/禁用下拉菜单。 但这是行不通的。 帮帮我
这是我的HTMLcode
<body>
<div id='1' value='1' class='dropdown-check-list' tabindex='100'>
<span class='anchor'>Select Term(s)</span>
<ul id='items' class='items'>
<li><input type='checkbox' />Term 1 </li>
<li><input type='checkbox' />Term 2 </li>
<li><input type='checkbox' />Term 3 </li>
</ul>
</div>
<br/>
<br/>
<input type ="checkbox" id='IsAssociation' /><span>your checkbox</span>
这是我的CSS
<style>
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: '';
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 2px solid #000;
border-top: none;
}
.dropdown-check-list ul.items li{
list-style: none;
}
.disabled {
pointer-events:none;
opacity:0.6;
}
</style>
这是我的Java下拉菜单脚本
<script>
var checkList = document.getElementById('1');
var items = document.getElementById('items');
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
if (items.classList.contains('visible')){
items.classList.remove('visible');
items.style.display = "none";
}
else{
items.classList.add('visible');
items.style.display = "block";
}
}
items.onblur = function(evt) {
items.classList.remove('visible');
}
</script>
这是我使用复选框禁用下拉菜单的代码
$(document).on('change', '#IsAssociation', function(){
debugger;
if($(this).prop('checked')){
$('#items').attr('disabled', 'disabled');
} else {
$('#items').removeAttr('disabled');
}
});
5 个解决方案
解决方案1
0 2018-08-24 06:02:40
您要对ul标签应用disabled ，必须对checkbox应用disabled
试试用prop而不是attr
$(document).on('change', '#IsAssociation', function(){
if($(this).prop('checked')){
$('#items li input').prop('disabled', true);
} else {
$('#items li input').prop('disabled',false);
}
});
解决方案2
0 2018-08-24 06:03:17
您无需禁用该列表。 您可以仅禁用切换列表的元素。
if ($(this).prop('checked')) {
$('.anchor').addClass('disabled');
} else {
$('.anchor').removeClass('disabled');
}
解决方案3
0 2018-08-24 06:35:40
为每个列表<li>元素添加类。
<ul id='items' class='items'>
<li><input type='checkbox' class="cBox"/>Term 1 </li>
<li><input type='checkbox' class="cBox"/>Term 2 </li>
<li><input type='checkbox' class="cBox"/>Term 3 </li>
</ul>
$(document).on('change', '#IsAssociation', function(){
debugger;
if($(this).prop('checked')){
$('.cBox').attr('disabled', 'disabled');
} else {
$('.cBox').removeAttr('disabled');
}
});
解决方案4
0
将disabled attribute应用于input并将disabled class应用于li 。
$('#items').find('input').prop('disabled',!this.checked);
$('#items').find('li').toggleClass('disabled',!this.checked);
var checkList = document.getElementById('1'); var items = document.getElementById('items'); checkList.getElementsByClassName('anchor')[0].onclick = function(evt) { if (items.classList.contains('visible')) { items.classList.remove('visible'); items.style.display = "none"; } else { items.classList.add('visible'); items.style.display = "block"; } } items.onblur = function(evt) { items.classList.remove('visible'); } $(function() { $(document).on('change', '#IsAssociation', function() { $('#items').find('input').prop('disabled', !this.checked); $('#items').find('li').toggleClass('disabled', !this.checked); }); $('#IsAssociation').trigger('change'); });
.dropdown-check-list { display: inline-block; } .dropdown-check-list .anchor { position: relative; cursor: pointer; display: inline-block; padding: 5px 50px 5px 10px; border: 1px solid #ccc; } .dropdown-check-list .anchor:after { position: absolute; content: ''; border-left: 2px solid black; border-top: 2px solid black; padding: 5px; right: 10px; top: 20%; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .dropdown-check-list .anchor:active:after { right: 8px; top: 21%; } .dropdown-check-list ul.items { padding: 2px; display: none; margin: 0; border: 2px solid #000; border-top: none; } .dropdown-check-list ul.items li { list-style: none; } .disabled { pointer-events: none; opacity: 0.6; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='1' value='1' class='dropdown-check-list' tabindex='100'> <span class='anchor'>Select Term(s)</span> <ul id='items' class='items'> <li><input type='checkbox' />Term 1 </li> <li><input type='checkbox' />Term 2 </li> <li><input type='checkbox' />Term 3 </li> </ul> </div> <br/> <br/> <input type="checkbox" id='IsAssociation' /><span>your checkbox</span>
解决方案5
0 2018-08-24 06:51:21
$('#IsAssociation').change(function() {
if(this.checked) {
$('#items').prop("disabled", true);
} else {
$('#items').prop("disabled", false);
}
});
这应该做。
使用JavaScript禁用下拉菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.