How can I use Javascript to limit the number of checkboxes that can be selected?

Question

Hello, I’m doing a mini-project on jsfidlle, follows the link https://jsfiddle.net/elenderg/wzarrg06/ There are several buttons and the user will have to select one of them as shown below:

When the user chooses how many numbers he wants to bet, the table with the numbers appears. The problem is that my function below is not working (I put the limit of 6 as an example, the correct one would be the limit to adjust according to the option selected by the user. follows the function code:

(function($){

var currentLimit=6;

$('div.limits > input[type=button]').on('click',function(){
  currentLimit = parseInt($(this).data('value'));
});

$('div.checks input').on('click', function(e){
    var totalChecked = $('input:checked').length;

    if (totalChecked > currentLimit){
        e.preventDefault();
    }
});
})

Another thing I think would be more practical would be to replace the checkboxes by some kind of button.

Answer 1

See these two examples:

$(document).on('change', '.shared', function() {
  var countShared = $('.shared:checked').length;
  if (countShared > 3 && $(this).is(':checked')) {
    alert("You have reached the maximum number of selectable checkboxes.");
    $(this).prop('checked', false);
  }
});

DEMO Link

or

$(document).on('change', '.shared', function() {
    var countShared = $('.shared:checked').length;
    if(countShared > 3) {          //<-------------here is the difference
        alert("You have reached the maximum number of selectable checkboxes.");
        $(this).prop('checked',false);
    }
});

DEMO Link

Additional:

Example with Jquery

I hope I’ve helped;

Source: https://stackoverflow.com/questions/26015422/jquery-how-to-block-checkboxes-for-checking-when-certain-condition-is-met

Answer 2

first thing you must do, replace the “ and ” for ", this is interfering with your HTML, so make your inline events receive the parameter event as an argument.

second point in the myFunction store the limit quantity of inputs in a variable.

<button data-value="6" class='btn btn-info custom'onclick="myFunction(event)">6 (R$ 2,00)</button>

var limite = 0;
function myFunction(event) {
  var x = document.getElementById("tabela");
  x.style.display = "inline-block";
  limite = parseInt(event.target.dataset.value);
}

finally implement the Keepcount method...

var quantidade = 0;
function KeepCount(event) {
    if (event.target.checked && quantidade == limite) {
        event.preventDefault();
        return;
    }
    quantidade += event.target.checked ? 1 : -1;    
}

Follow your updated fiddle: Jsfiddle