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转换库，将复选框转换为iOS样式开关。

我使用代码设置了这个：

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

哪种方式适用于样式化页面上的所有复选框，但现在限制选择数量的第一部分代码不再有效。

我尝试了各种代码和方法的代码和方法，但是我无法取回我在开始时使用的功能，用户只能选择最多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));
});

参考文献：

Answer 2

无法通过切换功能实现这一点，看起来任何解决方案都会变得非常复杂。

最后，我找到了另一个jquery库iosCheckbox，它更易于使用和控制。

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

我能够设计CSS以使iosCheckbox看起来与转换完全一样，所以没有明显的前端差异，但后端代码更小，我的解决方案工作更快！

jquery openshery需要限制所选开关的数量

2 个答案: