jQuery 實現單選評價：點擊選中後禁止其他選項

需求分析

4 個評價選項（很滿意、滿意、一般、差），點擊任一選項添加 on 樣式，其餘選項不可再選，提示「已評價」。需防止重複點擊同一選項切換狀態。

核心邏輯

• 點擊時判斷：若當前無 on 且兄弟元素有 on → 提示已評價。
• 否則：移除所有 on，給當前添加 on（允許更改選擇）。

完整代碼

<style> li.on { color: green; } </style>
<ul id="ul">
    <li>很滿意</li>
    <li>滿意</li>
    <li>一般</li>
    <li>差</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
$('#ul li').click(function() {
    var $this = $(this);
    if (!$this.hasClass('on') && $this.siblings().hasClass('on')) {
        alert('你已經評價');
    } else {
        $this.addClass('on').siblings().removeClass('on');
    }
});
</script>

優化建議

• 若業務要求「一旦選擇不可更改」，移除 else 分支中 removeClass，僅在無 on 時添加。
• 使用 delegate 或 on 綁定支持動態添加的選項。

簡潔的邏輯實現單選互斥交互，用戶體驗友好。