corrade-nucleus-nucleons
/base/000_base/node_modules/bootstrap-validator/sandbox/checkbox-group.html |
@@ -0,0 +1,72 @@ |
<!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> |