Skip to content

Instantly share code, notes, and snippets.

@moh8med

moh8med/index.html

Last active October 14, 2016 18:45
Show Gist options
  • Save moh8med/df243d527d884ceb0e53fce4bcfd1b9f to your computer and use it in GitHub Desktop.
Save moh8med/df243d527d884ceb0e53fce4bcfd1b9f to your computer and use it in GitHub Desktop.
Download ZIP
Dependent Checkboxes
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dependent Checkboxes</title>
<style>
body {
text-align: center;
}
.permission-group {
display: inline-block;
text-align: left;
}
.permission-item {
display: inline-block;
padding: 0 0 .5em;
}
</style>
</head>
<body>
<section class="permission-group">
<h3>Account</h3>
<label class="permission-item"
data-depends="listAllAccounts,canEditAccount,canDeleteAccount,canAddUser">
<input type="checkbox" name="permissions" value="canAddAccount">
Add Account
</label>
<br>
<label class="permission-item"
data-depends="listAllAccounts,canDeleteAccount">
<input type="checkbox" name="permissions" value="canEditAccount" checked>
Edit Account
</label>
<br>
<label class="permission-item"
data-depends="listAllAccounts">
<input type="checkbox" name="permissions" value="canDeleteAccount">
Delete Account
</label>
<br>
<label class="permission-item">
<input type="checkbox" name="permissions" value="listAllAccounts" disabled checked>
List All Accounts
</label>
</section>
<section class="permission-group">
<h3>User</h3>
<label class="permission-item"
data-depends="listAllUsers,canEditUser,canDeleteUser">
<input type="checkbox" name="permissions" value="canAddUser">
Add User
</label>
<br>
<label class="permission-item"
data-depends="listAllUsers,canDeleteUser">
<input type="checkbox" name="permissions" value="canEditUser">
Edit User
</label>
<br>
<label class="permission-item"
data-depends="listAllUsers">
<input type="checkbox" name="permissions" value="canDeleteUser" checked>
Delete User
</label>
<br>
<label class="permission-item">
<input type="checkbox" name="permissions" value="listAllUsers" disabled checked>
List All Users
</label>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
(function($) {
/**
* Automatically add checked/disabled data attributes
*/
$('.permission-group > .permission-item')
// add data-checked attributes
.children('input:checked').data('checked', true)
.end()
// add data-disabled attributes
.children('input:disabled').data('disabled', true);
/**
* Automaticall select/deselect permissions dependencies
*/
handleAllPermissionDepends();
/**
* Checkbox change event
*/
$(document).on('change', '.permission-item > input[type=checkbox]', function(e) {
handlePermissionDepends( $(this) );
handleAllPermissionDepends();
});
function handleAllPermissionDepends() {
$.each($('.permission-item > input[type=checkbox]:checked'), function(index, val) {
handlePermissionDepends( $(this) );
});
}
/**
* Checks/unchecks permission dependencies
*
* @param {object} $this
* @return {void}
*/
function handlePermissionDepends($this) {
var $group = $this.parents('.permission-group'),
depends_data = $this.parent().data('depends');
if (typeof depends_data !== 'undefined') {
var $depends = depends_data.split(',');
if ($this.is(':checked')) {
$.each($depends, function(index, val) {
// $group.find('.permission-item > input[value='+val+']')
var input = $('.permission-item > input[value='+val+']');
input.prop('checked', true);
input.prop('disabled', true);
});
} else {
$.each($depends, function(index, val) {
// var input = $group.find('.permission-item > input[value='+val+']');
var input = $('.permission-item > input[value='+val+']');
if (typeof input.data('disabled') == 'undefined') {
input.prop('disabled', false);
}
if (typeof input.data('checked') == 'undefined') {
input.prop('checked', false);
}
handlePermissionDepends(input);
});
}
}
}
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment