使用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.