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

View file

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