diff --git a/app/javascript/controllers/required_checkbox_controller.js b/app/javascript/controllers/required_checkbox_controller.js index 5359a93a..eb0050fe 100644 --- a/app/javascript/controllers/required_checkbox_controller.js +++ b/app/javascript/controllers/required_checkbox_controller.js @@ -11,6 +11,13 @@ export default class extends Controller { connect() { } + checkboxTargetConnected(checkboxTarget) { + if (checkboxTarget.checked) { + this.requiredTarget.required = false; + this.revalid(); + } + } + /* * El grupo deja de ser obligatorio cuando al menos uno está activo. */ @@ -29,11 +36,18 @@ export default class extends Controller { } /* - * Si el checkbox es considerado + * Si el checkbox es considerado inválido, transmitir todos los + * estados a los checkboxes. */ - invalid(event) { + invalid(event = undefined) { for (const checkbox of this.checkboxTargets) { checkbox.required = true; } } + + revalid(event = undefined) { + for (const checkbox of this.checkboxTargets) { + checkbox.required = false; + } + } } diff --git a/app/views/posts/new_array.haml b/app/views/posts/new_array.haml index 9d6e62ea..7fd52a53 100644 --- a/app/views/posts/new_array.haml +++ b/app/views/posts/new_array.haml @@ -3,6 +3,6 @@ = render 'targets/array/item', value: @value, class: 'mb-2', id: item_id do .d-flex.flex-row.flex-wrap .flex-grow-1 - = render 'bootstrap/custom_checkbox', name: @name, id: random_id, value: @value, checked: true, content: @value + = render 'bootstrap/custom_checkbox', name: @name, id: random_id, value: @value, checked: true, content: @value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' } %div %button.btn.btn-sm.m-0{ data: { action: 'array#remove', 'remove-target-param': item_id } }= t('.remove') diff --git a/app/views/posts/new_has_many_value.haml b/app/views/posts/new_has_many_value.haml index a4c87fc9..7204a268 100644 --- a/app/views/posts/new_has_many_value.haml +++ b/app/views/posts/new_has_many_value.haml @@ -1,2 +1,2 @@ = render 'targets/array/item', value: @uuid, 'send-value': @uuid, 'human-value': @value, class: 'mb-2' do - = render 'bootstrap/custom_checkbox', name: @name, id: random_id, value: @uuid, checked: true, content: @value + = render 'bootstrap/custom_checkbox', name: @name, id: random_id, value: @uuid, checked: true, content: @value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' }