CODEWITHSUNDEEP
javascriptjquerycheckbox
Will
Will

Reputation: 544

Change background color with checkbox, limited number of checkboxes selectable

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");
    }
});

Upvotes: 0

Views: 152

Answers (5)

IcantSpell
IcantSpell

Reputation: 206

This works in Fiddler for ya.

$('.playerCheckbox').change(function() {

    if($('.playerCheckbox:checked').length > 2) {this.checked = false; }
    else{
        if( this.checked == true ) {$(this).closest("li").addClass("checked");}
        if( this.checked == false ) {$(this).closest("li").removeClass("checked");}
    }

});

Upvotes: 0

Matthew Merlene
Matthew Merlene

Reputation: 66

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

if(numberCurrentlySelected <= selectableFriends) {
    $(this).closest("li").toggleClass("checked");
    }
});

I just changed the second part to <= rather than < and then created the numberCurrentlySelected variable earlier on so that you aren't calling querying more than once. Caeths is better though instead of using a second if statement it just uses an else, makes sense and gets rid of a comparison.

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

DEMO

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

Upvotes: 0

Chris Franklin
Chris Franklin

Reputation: 4004

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

A slightly cleaner implementation that does what you want. Check out the JSFiddle

Upvotes: 4

Johan Karlsson
Johan Karlsson

Reputation: 6476

Try this:

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

Check it out here: JSFIDDLE

Upvotes: 2

Related Questions