3300.me

upper limit checkbox

last update: 2016/08/08

sample2

<!doctype html>
<html lang="ja">
<title>title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

<div data-max="3">
<label><input type="checkbox" name="name1" value="1">1</label>
<label><input type="checkbox" name="name1" value="2">2</label>
<label><input type="checkbox" name="name1" value="3">3</label>
<label><input type="checkbox" name="name1" value="4">4</label>
<label><input type="checkbox" name="name1" value="5">5</label>
<label><input type="checkbox" name="name1" value="6">6</label>
<label><input type="checkbox" name="name1" value="7">7</label>
</div>

<div data-max="3">
<label><input type="checkbox" name="name2" value="1">1</label>
<label><input type="checkbox" name="name2" value="2">2</label>
<label><input type="checkbox" name="name2" value="3">3</label>
<label><input type="checkbox" name="name2" value="4">4</label>
<label><input type="checkbox" name="name2" value="5">5</label>
<label><input type="checkbox" name="name2" value="6">6</label>
<label><input type="checkbox" name="name2" value="7">7</label>
</div>

<script>
(function(doc) {
  var lang = doc.querySelector('html').getAttribute('lang');
  var isJa = !!(lang === 'ja' || lang === 'ja-JP');
  var checkboxSet = doc.querySelectorAll('[data-max]');

  if (checkboxSet.length === 0) {
    return;
  }

  function setUpperLimit(el, name, max) {
    el.addEventListener('click', function(ev) {
      if (doc.querySelectorAll('input[name="' + name + '"]:checked').length > max) {
        if (isJa) {
          alert('最大' + max + 'つまで選択可能です。');
        } else {
          alert('The upper limit is ' + max + '.');
        }
        ev.preventDefault();
      }
    });
  }

  Object.values(checkboxSet).forEach(function(value) {
    var max = value.dataset.max;
    if (isNaN(max)) {
      return;
    };

    var inputs = value.querySelectorAll('input');
    if (inputs.length === 0) {
      return;
    };

    var name = value.querySelector('input').getAttribute('name');
    Object.values(inputs).forEach(function (value) {
      setUpperLimit(value, name, max);
    });
  });
})(document);
</script>

code_popup

sample1

<!doctype html>
<html lang="ja">
<title>title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

<div>
<label><input type="checkbox" name="name1" value="1">1</label>
<label><input type="checkbox" name="name1" value="2">2</label>
<label><input type="checkbox" name="name1" value="3">3</label>
<label><input type="checkbox" name="name1" value="4">4</label>
<label><input type="checkbox" name="name1" value="5">5</label>
<label><input type="checkbox" name="name1" value="6">6</label>
<label><input type="checkbox" name="name1" value="7">7</label>
</div>

<div>
<label><input type="checkbox" name="name2" value="1">1</label>
<label><input type="checkbox" name="name2" value="2">2</label>
<label><input type="checkbox" name="name2" value="3">3</label>
<label><input type="checkbox" name="name2" value="4">4</label>
<label><input type="checkbox" name="name2" value="5">5</label>
<label><input type="checkbox" name="name2" value="6">6</label>
<label><input type="checkbox" name="name2" value="7">7</label>
</div>

<script>
(function(doc) {
  var lang = doc.querySelector('html').getAttribute('lang');
  var isJa = !!(lang === 'ja' || lang === 'ja-JP');

  function upperLimit(name, max) {
    var inputs = doc.querySelectorAll('input[name=' + name + ']');
    Object.values(inputs).forEach(function(value) {
      value.addEventListener('click', function(ev) {
        if (doc.querySelectorAll('input[name=' + name + ']:checked').length > max) {
          if (isJa) {
            alert('最大' + max + 'つまで選択可能です。');
          } else {
            alert('The upper limit is ' + max + '.');
          }
          ev.preventDefault();
        }
      });
    });
  }
  upperLimit('name1', 3);
  upperLimit('name2', 3);
})(document);
</script>

code_popup

.