corrade-nucleus-nucleons – Rev 20

Subversion Repositories:
Rev:
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
    <script src="../js/validator.js" type="text/javascript"></script>
    <title></title>
  </head>

  <body>

    <div class="well">
      <form id="myForm">

        <div class="form-group">
          <div class="checkbox">
            <label>
              <input type="checkbox" name="check-1" data-chkgrp="check">
              Check 1
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" name="check-2" data-chkgrp="check">
              Check 2
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" name="check-3" data-chkgrp="check">
              Check 3
            </label>
          </div>

          <div class="help-block with-errors"></div>
        </div>

      </form>

      <div class="form-group">
        <button type="submit" form="myForm" class="btn btn-primary">Submit</button>
        <button type="reset" form="myForm" class="btn btn-default">Reset</button>
      </div>
    </div>

    <script type="text/javascript">
      $('#myForm').validator({
        custom: {
          chkgrp: function ($el) {
            var name = $el.data('chkgrp');
            var $checkboxes = $el.closest('form').find('input[data-chkgrp="' + name + '"]');

            if (!$checkboxes.is(':checked')) {
              return 'Need at least one checked'
            }
          }
        }
      }).on('change.bs.validator', '[data-chkgrp]', function (e) {
        var $el  = $(e.target)
        var name = $el.data('chkgrp')
        var $checkboxes = $el.closest('form').find('input[data-chkgrp="' + name + '"]')

        $checkboxes.not(':checked').trigger('input')
      })
    </script>

  </body>

</html>