Как ограничить количество выбранных флажков?

Ответ 1

Используя change событие, вы можете сделать что-то вроде этого:

var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
   if($(this).siblings(':checked').length >= limit) {
       this.checked = false;
   }
});

См. эту рабочую демонстрацию

Ответ 2

Попробуйте это.

В случае изменения события

$('input[type=checkbox]').on('change', function (e) {
    if ($('input[type=checkbox]:checked').length > 3) {
        $(this).prop('checked', false);
        alert("allowed only 3");
    }
});

Проверьте это в JSFiddle

Ответ 3

Попробуйте DEMO:

 $(document).ready(function () {
   $("input[name='vehicle']").change(function () {
      var maxAllowed = 3;
      var cnt = $("input[name='vehicle']:checked").length;
      if (cnt > maxAllowed) 
      {
         $(this).prop("checked", "");
         alert('Select maximum ' + maxAllowed + ' Levels!');
     }
  });
});

Ответ 4

Я думаю, мы должны использовать click вместо change

Работа DEMO

Ответ 5

$("input:checkbox").click(function(){
    if ($("input:checkbox:checked").length > 3){
      return false;
   }
});

Ответ 6

Работа DEMO

Попробуйте это

var theCheckboxes = $(".pricing-levels-3 input[type='checkbox']");
theCheckboxes.click(function()
{
    if (theCheckboxes.filter(":checked").length > 3)
        $(this).removeAttr("checked");
});

Ответ 7

Аналогичные вопросы уже были получены:

• Ограничить количество выбранных флажков, jQuery
• Ограничить количество флажков, разрешенных для проверки

также: https://www.google.com/search?q=jquery+limit+number+checkboxes+selected

Ответ 8

Я бы сказал, как сказал letiagoalves, но у вас может быть более одного вопроса в вашей форме, поэтому я бы рекомендовал сделать следующее:

  var limit = 3;
    $('input.single-checkbox').on('change', function(evt) {
        if($('input.single-checkbox').siblings('input.single-checkbox:checked').length > limit) {
            this.checked = false;
        }
    });

Ответ 9

$('.checkbox').click(function(){
  if ($('.checkbox:checked').length >= 3) {
    $(".checkbox").not(":checked").attr("disabled",true);
  }
  else 
    $(".checkbox").not(":checked").removeAttr('disabled');
});

Я использовал это.

Ответ 10

Вот как я сделал это:

// Function to check and disable checkbox
function limit_checked( element, size ) {
  var bol = $( element + ':checked').length >= size;
  $(element).not(':checked').attr('disabled',bol);
}

// List of checkbox groups to check
var check_elements = [
  { id: '.group1 input[type=checkbox]', size: 2 },
  { id: '.group2 input[type=checkbox]', size: 3 },
];

// Run function for each group in list
$(check_elements).each( function(index, element) {
  // Limit checked on window load
  $(window).load( function() {
    limit_checked( element.id, element.size );
  })

  // Limit checked on click
  $(element.id).click(function() {
    limit_checked( element.id, element.size );
  });
});

Ответ 11

У меня есть эта функция, чтобы автоматически отключить предыдущий

      var limit = 3;
      $('.compare_items').on('click', function(evt) {
        index = $(this).parent('td').parent('tr').index();
        if ($('.compare_items:checked').length >= limit) {
          $('.compare_items').eq(localStorage.getItem('last-checked-item')).removeAttr('checked');
          //this.checked = false;
        }
        localStorage.setItem('last-checked-item', index);
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="compare_items">1
<input type="checkbox" class="compare_items">2
<input type="checkbox" class="compare_items">3
<input type="checkbox" class="compare_items">4
<input type="checkbox" class="compare_items">5
<input type="checkbox" class="compare_items">6
<input type="checkbox" class="compare_items">7
<input type="checkbox" class="compare_items">8
<input type="checkbox" class="compare_items">9
<input type="checkbox" class="compare_items">10

Ответ 12

Я сделал это сегодня, с той разницей, что я хотел снять самую старую галочку вместо того, чтобы мешать пользователю проверять новую:

    let maxCheckedArray = [];
    let assessmentOptions = jQuery('.checkbox-fields').find('input[type="checkbox"]');
    assessmentOptions.on('change', function() {
        let checked = jQuery(this).prop('checked');
        if(checked) {
            maxCheckedArray.push(jQuery(this));
        }
        if(maxCheckedArray.length >= 3) {
            let old_item = maxCheckedArray.shift();
            old_item.prop('checked', false);
        }
    });

Ответ 13

Если вы хотите снять флажок, который вы выбрали в первую очередь, при условии, что разрешено 3 флажка. С ванильным JavaScript; вам нужно назначить onclick = "checking (this)" в вашем html-поле ввода

var queue = [];
function checking(id){
   queue.push(id)
   if (queue.length===3){
    queue[0].checked = false
    queue.shift()
   }
}