如果单击选中的列表项，请防止取消选中

If click on checked list item prevent uncheck

本文关键字：取消 列表 单击 如果      更新时间：2023-09-26

我想要的是，当列表项被选中，并且您单击选中的项时，您不能取消选中它们。

感谢您的帮助：）

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

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

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

如果您只需要事件处理程序一次性执行某项操作，那么有一种方法很有用：

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

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

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

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

只是简单地不删除该类。

$(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>

如果您只想第一次选中复选框并防止它们被取消选中，请使用事件侦听器：

<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，但我认为您使用的是点击事件侦听器。希望这能有所帮助！

相关文章：