Link labels to their corresponding checkbox so that they become easier to click

This commit is contained in:
Alex Tselegidis 2022-09-14 12:34:04 +02:00
parent c71f37ca73
commit f28a8d032c
2 changed files with 16 additions and 7 deletions

View file

@ -569,6 +569,8 @@ App.Pages.Providers = (function () {
addEventListeners();
vars('services').forEach((service) => {
const checkboxId = `provider-service-${service.id}`;
$('<div/>', {
'class': 'checkbox',
'html': [
@ -576,6 +578,7 @@ App.Pages.Providers = (function () {
'class': 'checkbox form-check',
'html': [
$('<input/>', {
'id': checkboxId,
'class': 'form-check-input',
'type': 'checkbox',
'data-id': service.id,
@ -586,7 +589,7 @@ App.Pages.Providers = (function () {
$('<label/>', {
'class': 'form-check-label',
'text': service.name,
'for': service.id
'for': checkboxId,
})
]
})

View file

@ -493,7 +493,13 @@ App.Pages.Secretaries = (function () {
* Initialize the module.
*/
function initialize() {
resetForm();
filter('');
addEventListeners();
vars('providers').forEach((provider) => {
const checkboxId = `provider-service-${provider.id}`;
$('<div/>', {
'class': 'checkbox',
'html': [
@ -501,24 +507,24 @@ App.Pages.Secretaries = (function () {
'class': 'checkbox form-check',
'html': [
$('<input/>', {
'id': checkboxId,
'class': 'form-check-input',
'type': 'checkbox',
'data-id': provider.id
'data-id': provider.id,
'prop': {
'disabled': true,
}
}),
$('<label/>', {
'class': 'form-check-label',
'text': provider.first_name + ' ' + provider.last_name,
'for': provider.id
'for': checkboxId,
})
]
})
]
}).appendTo('#secretary-providers');
});
resetForm();
filter('');
addEventListeners();
}
document.addEventListener('DOMContentLoaded', initialize);