jQuery实现指示灯颜色选择功能，禁用兄弟节点onclick事件

功能需求

• 有多种颜色的指示灯，保证只能亮起一种颜色的灯。
• 当选中一种颜色的灯时，该灯亮起，其它的灯熄灭且不可操作，向后台传送选中的颜色（本篇不讨论数据传递）

HTML标签

<div class="lightchoose">
    <a class="light red off" style="cursor:not-allowed" href="javascript:void(0);" onclick="lightchoose('red')"></a>
    <a class="light green off" style="cursor:not-allowed" href="javascript:void(0);" onclick="lightchoose('green')"></a>
    <a class="light blue active" href="javascript:void(0);" onclick="lightchoose('blue')"></a>
    <a class="light yellow off" style="cursor:not-allowed" href="javascript:void(0);" onclick="lightchoose('yellow')"></a>
    <a class="light purple off" style="cursor:not-allowed" href="javascript:void(0);" onclick="lightchoose('purple')"></a>
    <a class="light cyan off" style="cursor:not-allowed" href="javascript:void(0);" onclick="lightchoose('cyan')"></a>
</div>

• 在class中添加active则该灯处于亮起状态。
• style=“cursor:not-allowed” 显示禁用样式。

坑点

• style=“cursor:not-allowed” 这个style虽然能在页面上显示禁用的指示，但是并不能禁用JS的点击事件
• 显示为禁止点击的图标，但是点击后灯还是会亮起，原因是CSS样式并不能禁用事件。

解决办法

• 在class中添加 off 关键词，当JS函数检测到此关键词时，return
• JS代码如下

function lightchoose(color) {
        var dom = '.' + color;
        if ($(dom).hasClass('off')) {
            return
        }
        $(dom).toggleClass('active');
        if ($(dom).hasClass('active')) {
            $(dom).siblings().attr('style', 'cursor:not-allowed');
            $(dom).siblings().addClass('off');
        } else {
            $(dom).siblings().removeAttr('style', 'cursor:not-allowed');
            $(dom).siblings().removeClass('off')
        }
    }

总结

• CSS样式并不能禁用JS的事件。
• 禁用兄弟节点的事件需要添加关键词标记，或者添加事件状态变量。