**Desired:** User can only click on 2 out of 3 displayed checkboxes; when the user clicks on a checkbox, the checkbox background turns orange. 

**Currently:** The first checkbox selected acts as desired. The second checkbox ticks, but does not change background color. Upon clicking again, it un-ticks and changes to the desired background color (yet it is not selected). A 3rd checkbox is not selectable whilst two are already selected.

**Requesting:** Help to achieve the desired, thank you!

**Fiddle:** <http://jsfiddle.net/0fkn1xs4/>

**Code:**

```
$('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");
    }
});

```