jquery switchery необходимо ограничить количество выбранных переключателей

Question

У меня есть страница с несколькими флажками для выбора различных параметров, и пользователю разрешено выбирать только до 6 вариантов.

Я это полностью работает со стандартными HTML флажками тонкодисперсных, используя следующий код:

$('.ios-switch').on('click', function(e) { 
var num_checked = 0; 
$('.ios-switch').each(function() { if ($(this).prop('checked')) { num_checked++; } }); 
if (num_checked > 6) { $(this).prop('checked', false); } 
}); 

Я с тех пор добавил JQuery библиотеки switchery, чтобы включить флажки в коммутаторы стиля IOS.

Я установить это с помощью кода:

var elems = Array.prototype.slice.call(document.querySelectorAll('.ios-switch')); 
elems.forEach(function(html) { 
var switchery = new Switchery(html, { size: 'small' }); 
}); 

, который работает отлично подходит для укладки всех флажков на странице, но теперь первый бит кода, который ограничивает количество выборов больше не работает.

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

Answer 1

кажется, что вам нужно использовать простой change обработчика событий:

function limitChecksTo(n) { 

    // ensures the passed-in number is a Number, 
    // even if entered as a String (eg: '6'); 
    n = parseInt(n, 10); 

    // converting the NodeList from document.querySelectorAll() 
    // into an Array (ECMAScript 6): 
    var checkboxes = Array.from(

     // finding all the <input> elements whose type is 'checkbox' 
     // and have a class-name of 'ios-switch': 
     document.querySelectorAll('input[type=checkbox].ios-switch') 
    ); 

    // 'this' is passed in automatically 
    // from EventTarget.addEventListener() 
    // and is the element that has the 
    // event-listener attached: 
    this.checked = checkboxes 

    // filtering the array of checkboxes to retain 
    // only those that are checked (using Arrow functions) 
    .filter(checkbox => checkbox.checked) 
    // if the length is less than n + 1 we 
    // we set the checked state of the element firing 
    // the event to true, otherwise to false: 
    .length < n + 1; 
} 

// iterating over the 'elems' using Array.prototype.forEach(): 
elems.forEach(function (html) { 
    var switchery = new Switchery(html, { size: 'small' }); 

    // setting the limitChecksTo() function as the 
    // event-handler for the 'change' event: 
    html.addEventListener('change', limitChecksTo(6)); 
}); 

Ссылки:

• Array.from().
• Array.prototype.filter().
• Array.prototype.forEach().
• Arrow Functions (=>).
• document.querySelectorAll().
• EventTarget.addEventListener().

Answer 2

Не удалось получить эту работу с помощью Switchery, и было похоже, что любое решение будет очень сложным.

В конце концов, я нашел еще одну библиотеку jquery, iosCheckbox, которая намного проще в использовании и управлении.

http://www.jqueryscript.net/form/iOS-Style-Checkbox-Plugin-with-jQuery-CSS3-iosCheckbox-js.html

Я был в состоянии изменить стиль CSS, чтобы получить iosCheckbox, чтобы выглядеть так же, как switchery, так что нет заметной переднего конца разницы, но задний конец коды гораздо меньше, и я получил мое решение работать намного быстрее!