JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.min.css">
<div class="container">
    <h2 class="span5">Set rules for number of selected checkboxes</h2>
</div>
<div class="container">
    <div class="span5">Here you should check at <strong>least 1</strong> and <strong>max 2</strong>.</div>
    <br /><br />
</div>
<div class="container">
<form action="#" method="get" class="form-horizontal well">
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Mon
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> Tue
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Wed
</label>
    <label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Thu
</label>
    <label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Fri
</label>
        <label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Sat
</label>
        <label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Sun
</label>
</div>
    <div class="container">
        <div class="span5">
            <input type="submit" class="btn" /></div>
</form>
</div>

JavaScript

(function() {
  var mi = 1;
  var ma = 2;
  $('form').submit(function(evt) {
    var $this = jQuery(this);
    var checked = $this.find(':checked').length;
    var errMsg = (checked<mi) ? 'Please select at least '+mi+' checkboxes\n' : '';
    if (ma>0) {
      errMsg+= (checked>ma) ? 'A maximum of '+ma+' checkboxes can be selected' : '';
    };
    if (errMsg!=='') {
      alert(errMsg);
      evt.preventDefault();
      return false;
    };
  });
})();