Позволяет пользователю выбрать только определенное количество флажков

Question

У меня есть флажок, и я хочу, чтобы пользователь выбирал максимум 3. Я не могу понять, как это сделать.

artificial intelligence <input type = "checkbox" name = "topic[]" value = "29" > 
computer graphics <input type = "checkbox" name = "topic[]" value = "30" > 
computer animation <input type = "checkbox" name = "topic[]" value = "31" > 
software engineering <input type = "checkbox" name = "topic[]" value = "32" > 

Answer 1

Задумывались ли вы о том, как интерфейс будет справиться с этим? Вот один подход с использованием JQuery:

// adjust this to be all checkboxes in the group 
var theCheckboxes = $("input[type='checkbox']"); 

theCheckboxes.click(function() 
{ 
    if (theCheckboxes.filter(":checked").length > 3) 
     $(this).removeAttr("checked"); 
}); 

http://jsfiddle.net/jyYu5/

Это предотвращает проверку после того, как три помечаются, но визуально не отключить поля. Так что это что-то дополнительное для рассмотрения.

Кроме того, вам по-прежнему необходимо проверить на стороне сервера, что только три были отмечены, поскольку пользователь может, очевидно, отправить любые данные, которые он хочет.

Answer 2

Вы можете сделать это с помощью jQuery очень легко. Наверное, немного сложнее с прямым javascript, но не много.

Загрузите jQuery и напишите функцию для выполнения при щелчке по галочке. В этой функции оператор if задает две вещи: кнопка в данный момент не отмечена и там больше, чем количество проверенных в настоящее время кнопок. Если оба значения истинны, то предотвратите дефолт.

Вот что он должен выглядеть следующим образом:

<input class="checkbox"></input>

$('.checkbox').click(function(){ 
    if ($(this:not(:checked)) && $(".checkbox:checked").length >= 3) { 
     event.preventDefault() 
    } 
}); 

Это должно предотвратить проверку более 3 флажков.

Answer 3

хорошо, очевидно, вы хотите, чтобы некоторые проверки на стороне клиента .... использовать JavaScript ....

Есть несколько способов сделать это ...

как равнину Javascript вы можете сделать что-то вроде

<script> 
var predefined_limit = 3; 
document.getElementByTagName('input').onchange = doSomething 


function doSomething(){ 
    var counter=0; 
    var elem = document.getElementByTagName('input'); 
    for(var i=0; i<elem.length; i++) 
     if(elem.type=='checkbox' && elem.checked == true) 
      counter ++; 
    if(counter > predefined_limit){ 
     this.checked = false; 
     alert('You can check only '+ predefined_limit + 'checkboxes') 
    } 
} 
</script> 

, то вы можете также использовать JQuery или другие JavaScript рамки, как другой ответ предполагает

Answer 4

С JQuery, вы можете рассчитывать проверил флажков так:

//Count number of checkboxes 

$('input[name="type[]"]').on('click', function() { 
    var nbcheck = $('input[name="type[]"]:checked').length; 
    if(nbcheck > 2) { 
     console.log('FORBIDEN!!!!'); 
     //Do stuffs you want --> 
    } 
});