I want to stop the user to check another checkbox after a certain number of checkboxes have been checked already. i.e. After 3 checkboxes are checked, the user cannot check anymore and a message says 'You're not allowed to choose more than 3 boxes.'

I'm almost there but the last checkbox is still being checked and I don't want that, I want it to be unchecked with the message appearing.

How do I do that:

var productList = $('.prod-list'),
    checkBox = productList.find('input[type="checkbox"]'),
    pareList = $('pare-list ul');

productList.delegate('input[type="checkbox"]', 'click', function () {
  var thisElem = $(this),
      thisData = thisElem.data('pare'),
      thisImg = thisElem.closest('li').find('img'),
      thisImgSrc = thisImg.attr('src'),
      thisImgAlt = thisImg.attr('alt');

  if (thisElem.is(':checked')) {
    if ($('input:checked').length < 4) {

        pareList.append('<li data-paring="' + thisData + '"><img src="' + thisImgSrc + '" alt="'+ thisImgAlt +'" /><li>');

    } else {
        $('input:checked').eq(2).attr('checked', false);
        alert('You\'re not allowed to choose more than 3 boxes');
    }
  } else {
    var pareListItem = pareList.find('li');

    for (var i = 0, max = pareListItem.length; i < max; i++) {
        var thisCompItem = $(pareListItem[i]),
            paringData = thisCompItem.data('paring');

        if (thisData === paringData) {
            thisCompItem.remove();
        }
    }

  }

});

I want to stop the user to check another checkbox after a certain number of checkboxes have been checked already. i.e. After 3 checkboxes are checked, the user cannot check anymore and a message says 'You're not allowed to choose more than 3 boxes.'

I'm almost there but the last checkbox is still being checked and I don't want that, I want it to be unchecked with the message appearing.

How do I do that:

var productList = $('.prod-list'),
    checkBox = productList.find('input[type="checkbox"]'),
    pareList = $('.pare-list ul');

productList.delegate('input[type="checkbox"]', 'click', function () {
  var thisElem = $(this),
      thisData = thisElem.data('pare'),
      thisImg = thisElem.closest('li').find('img'),
      thisImgSrc = thisImg.attr('src'),
      thisImgAlt = thisImg.attr('alt');

  if (thisElem.is(':checked')) {
    if ($('input:checked').length < 4) {

        pareList.append('<li data-paring="' + thisData + '"><img src="' + thisImgSrc + '" alt="'+ thisImgAlt +'" /><li>');

    } else {
        $('input:checked').eq(2).attr('checked', false);
        alert('You\'re not allowed to choose more than 3 boxes');
    }
  } else {
    var pareListItem = pareList.find('li');

    for (var i = 0, max = pareListItem.length; i < max; i++) {
        var thisCompItem = $(pareListItem[i]),
            paringData = thisCompItem.data('paring');

        if (thisData === paringData) {
            thisCompItem.remove();
        }
    }

  }

});

• javascript
• jquery
• checkbox

• Could you share your HTML code? – Salman Commented Nov 9, 2011 at 14:49
• Oh, maybe I misunderstood the question... you want that the new checkbox is selected but the previously or first selected one gets deslected? – Felix Kling Commented Nov 9, 2011 at 14:57

2 Answers 2

I might have misunderstood the question... see my ment.

Too prevent the selection, you can call event.preventDefault() and define the handler with the event parameter.

$('input[type="checkbox"]').click(function(event) {
    if (this.checked && $('input:checked').length > 3) {
        event.preventDefault();
        alert('You\'re not allowed to choose more than 3 boxes');
    }
});

DEMO

Alternatively, set this.checked to false. This will even prevent the browser from rendering the checkmark.

DEMO

one single jquery function for multiple forms

<form>
 <input  type="checkbox" name="seg"><br>
 <input  type="checkbox" name="seg" ><br>
 <input  type="checkbox" name="seg"><br>
 <input  type="checkbox" name="seg"><br>
</form>

<br><br><br><br><br>

<form>
  <input  type="checkbox" name="seg1"><br>
 <input  type="checkbox" name="seg1" ><br>
 <input type="checkbox" name="seg1"><br>
 <input type="checkbox" name="seg1"><br>
</form>

$('input[type="checkbox"]').click(function(event) {
  if ($("input[name= "+ this.name +"]:checked").length > 3) {
        event.preventDefault();
        alert('You\'re not allowed to choose more than 3 boxes');
    }
});