Question

我编写了这段代码，以创建具有多个选项的下拉列表。我添加了另一个复选框以启用/禁用下拉菜单。但这是行不通的。帮我解决这个问题。

这是我的HTML代码

<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');
    }
});

Answer 1

您要将disabled应用于ul标签，必须将disabled应用于checkbox

尝试使用prop而不是attr

$(document).on('change', '#IsAssociation', function(){

    if($(this).prop('checked')){
        $('#items li input').prop('disabled', true);
    } else {
        $('#items li input').prop('disabled',false);
    }
});

Answer 2

您不需要禁用该列表。您只需禁用切换列表的元素即可。

if ($(this).prop('checked')) {
    $('.anchor').addClass('disabled');
} else {
    $('.anchor').removeClass('disabled');
}

Answer 3

为每个列表<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');
    }
});

Answer 4

对attribute禁用input，对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>

Answer 5

$('#IsAssociation').change(function() {
    if(this.checked) {
        $('#items').prop("disabled", true);
    } else {
        $('#items').prop("disabled", false); 
    }
});

这应该做。

使用JavaScript禁用复选框的下拉菜单

5 个答案: