JS：複選框鏈接到跨度和背景顏色

Question

我有兩個複選框（見下文），單擊時激活跨度的背景顏色更改。問題是，我需要這樣，只有其中一個複選框可以被激活，而另一個被禁用。我知道所有關於單選按鈕的問題，即使當單選按鈕停用時，它也不會刪除跨度的背景顏色。我需要一個只允許選擇ONE ONE的解決方案，並在選擇另一個選項時自動刪除背景顏色。

例子： http://eblacksmith.com/test/

核心代碼：

$(document).ready(function() { 

$("span[class='checkbox']").addClass("unchecked"); 

    $(".checkbox").click(function(){ 

     if($(this).children("input").attr("checked")){ 
      // uncheck 
      $(this).children("input").attr("checked", false); 
      $(this).removeClass("checked"); 
      $(this).addClass("unchecked"); 
     }else{ 
      // check 
      $(this).children("input").attr("checked", true); 
      $(this).removeClass("unchecked"); 
      $(this).addClass("checked"); 
     } 

     //alert($(this).children("input").attr("checked")); 
    }); 

}); 

Answer 1

下面應該工作

$(document).ready(function() { 

    // get a list of all the checkboxes 
    var $checkboxEls = $('input[type="checkbox"]'); 

    $(document).on('change', 'input[type="checkbox"]', function(event) { 

    // highlight this check box 
    $(this).parent('span').addClass('checked'); 

    // remove other classes 
    $checkboxEls.not(this).removeAttr('checked').parent('span').removeClass('checked'); 

    }); 
}); 

它利用not()從我們存儲複選框的列表中刪除當前複選框早。 Example here