123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <!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>
|