checkbox-group.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://code.jquery.com/jquery.min.js"></script>
  5. <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
  6. <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  7. <script src="../js/validator.js" type="text/javascript"></script>
  8. <title></title>
  9. </head>
  10. <body>
  11. <div class="well">
  12. <form id="myForm">
  13. <div class="form-group">
  14. <div class="checkbox">
  15. <label>
  16. <input type="checkbox" name="check-1" data-chkgrp="check">
  17. Check 1
  18. </label>
  19. </div>
  20. <div class="checkbox">
  21. <label>
  22. <input type="checkbox" name="check-2" data-chkgrp="check">
  23. Check 2
  24. </label>
  25. </div>
  26. <div class="checkbox">
  27. <label>
  28. <input type="checkbox" name="check-3" data-chkgrp="check">
  29. Check 3
  30. </label>
  31. </div>
  32. <div class="help-block with-errors"></div>
  33. </div>
  34. </form>
  35. <div class="form-group">
  36. <button type="submit" form="myForm" class="btn btn-primary">Submit</button>
  37. <button type="reset" form="myForm" class="btn btn-default">Reset</button>
  38. </div>
  39. </div>
  40. <script type="text/javascript">
  41. $('#myForm').validator({
  42. custom: {
  43. chkgrp: function ($el) {
  44. var name = $el.data('chkgrp');
  45. var $checkboxes = $el.closest('form').find('input[data-chkgrp="' + name + '"]');
  46. if (!$checkboxes.is(':checked')) {
  47. return 'Need at least one checked'
  48. }
  49. }
  50. }
  51. }).on('change.bs.validator', '[data-chkgrp]', function (e) {
  52. var $el = $(e.target)
  53. var name = $el.data('chkgrp')
  54. var $checkboxes = $el.closest('form').find('input[data-chkgrp="' + name + '"]')
  55. $checkboxes.not(':checked').trigger('input')
  56. })
  57. </script>
  58. </body>
  59. </html>