javascript - 使用复选框更改背景颜色，可选择的复选框数量有限

Question

期望:用户只能点击显示的 3 个复选框中的 2 个；当用户单击复选框时，复选框背景变为橙色。

当前:选中的第一个复选框将按需要进行操作。第二个复选框勾选，但不更改背景颜色。再次单击后，它会取消勾选并更改为所需的背景颜色(但未选择)。当两个复选框已被选中时，第三个复选框不可选中。

请求:帮助实现期望，谢谢!

fiddle : http://jsfiddle.net/0fkn1xs4/

代码:

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
    this.checked = false;
    }
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected < selectableFriends) {
    $(this).closest("li").toggleClass("checked");
    }
});

Answer 1

$('input.playerCheckbox').on('change', function(event) {
  var selectableFriends = 2;
  if($('.playerCheckbox:checked').length > selectableFriends) {
    this.checked = false;
  }
  $(this).closest("li").toggleClass("checked", this.checked);
});

一个稍微干净一点的实现，可以满足您的需求。查看JSFiddle