如何禁用自定义复选框的点击事件

Question

我试图在添加 class disabled 后使用 jquery 禁用自定义复选框。以下是我到目前为止尝试过的代码。

$('span').click(function(e){
        $(this).toggleClass('active');
});
$('.disabled').click(function(e){
    e.stopPropagation();
    return false;
});

CSS

span{
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
    background-color: gray;
}
span.disabled{
    cursor: not-allowed;
}
cite.fa-check{
    font-size: 14px;
    color: #fff;
    margin-left: 1px;
    display: none;
}
span.active cite.fa-check{
    display: inline-block;
}

如果我将 class disabled 添加到我的复选框，我的活动应该不会成功。任何帮助，将不胜感激。提前致谢。

Working Demo

Answer 1

将代码更新到下面。 jquery not() 选择器避免在提到的元素上发生事件。你不需要使用 $('.disabled') 点击事件。

查看 fiddle

上的工作演示

$('span').not('.disabled').click(function(e){
    $(this).toggleClass('active');
});

Answer 2

通过检查 class 是否存在

来检查点击的元素是否被禁用

$('span').click(function(e){

    if($(this).hasClass("disabled"))
    {
        return false;

    }
    else
    {
        $(this).toggleClass('active');
    }
});


$('.disabled').click(function(e){
    return false;
    e.stopPropagation();

});

Answer 3

你可以使用 hasClass

你只需要这个js

$('span').click(function(e){
    if($(this).hasClass( "disabled" )==false){
        $(this).toggleClass('active');
    }
});

检查这个fiddle

如何禁用自定义复选框的点击事件

How to disable the click event for the customized checkbox

javascript

css

checkbox

jquery