Question

我想要的是，当选中列表项时，如果单击选中的项目，则无法取消选中它们。

感谢您的帮助：）

$(".collectioncontainer ul li").click(function(){
    $('.collectioncontainer ul li.checked').not(this).removeClass('checked');
    $(this).toggleClass('checked');
 })

Answer 1

使用.hasClass()来检查点击元素上是否存在类是没有意义的。使用.addClass()，因为您只想添加类：

$(".collectioncontainer ul li").click(function(){
  $('.collectioncontainer ul li.checked').not(this).removeClass('checked');
  $(this).addClass('checked');
});

Answer 2

如果您只需要事件处理程序一次执行某些操作，one方法很有用：

$(".collectioncontainer ul li").one('click', function() {
  $(this).addClass('checked');
})

使用addClass明确表示您只希望操作包含一个类，并且可以防止意外删除toggleClass的类。

Answer 3

您可以尝试使用hasClass方法进行检查：

$(".collectioncontainer ul li").click(function(){
    if( !$( this ).hasClass( 'checked' ) ) {
        $( this ).addClass( 'checked' );
    }
});

Answer 4

只是不要删除该类。

$(document).ready(function() {
  $('li').click(function() {
    $(this).addClass('checked');
  });
});

li.checked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ul>

Answer 5

如果您只希望第一次检查复选框并防止取消选中它们，请使用事件监听器：

<input id="checkbox" type="checkbox" name="bob" value="I'm bob">

<script type="text/javascript">
    var c=document.getElementById("checkbox");
    c.addEventListener("click",function(event_){
        this.checked=true;
    });
</script>

我知道您正在使用JQuery，但我确信您可以轻松地看到简单的JavaScript所做的事情，这个概念应该成立。我在JQuery上并不是那么出色，但无论如何，我认为你正在使用点击事件监听器。希望这有帮助！

如果单击选中的列表项，则阻止取消选中

5 个答案: