diff --git a/core/misc/states.js b/core/misc/states.js index ce4787dee445c12774d2af500e12b8974f64cab5..a55c4d08db00e8b36c6d5d7b67029acab791448e 100644 --- a/core/misc/states.js +++ b/core/misc/states.js @@ -681,11 +681,14 @@ $document.on('state:disabled', (e) => { // Only act when this change was triggered by a dependency and not by the // element monitoring itself. + const tagsSupportDisable = + 'button, fieldset, optgroup, option, select, textarea, input'; if (e.trigger) { $(e.target) .closest('.js-form-item, .js-form-submit, .js-form-wrapper') .toggleClass('form-disabled', e.value) - .find('select, input, textarea') + .find(tagsSupportDisable) + .addBack(tagsSupportDisable) .prop('disabled', e.value); } }); diff --git a/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php b/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php index 91e5540fda2ea230f85802a6d9a6ef6db38c27a6..bf367003d1050fb243b8149ca0ede1b708328ae8 100644 --- a/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php +++ b/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php @@ -557,6 +557,61 @@ public function buildForm(array $form, FormStateInterface $form_state) { ], ]; + $form['test_button_disabled'] = [ + '#type' => 'container', + ]; + + $form['test_button_disabled']['submit_button'] = [ + '#type' => 'submit', + '#value' => 'Submit button disabled when checkbox not checked', + '#states' => [ + 'disabled' => [':input[name="checkbox_enable_submit_button"]' => ['checked' => FALSE]], + ], + ]; + $form['test_button_disabled']['checkbox_enable_submit_button'] = [ + '#type' => 'checkbox', + '#title' => 'Enable input submit', + ]; + + $form['test_button_disabled']['input_textfield'] = [ + '#type' => 'textfield', + '#title' => 'Text field disabled when checkbox not checked', + '#states' => [ + 'disabled' => [':input[name="checkbox_enable_input_textfield"]' => ['checked' => FALSE]], + ], + ]; + $form['test_button_disabled']['checkbox_enable_input_textfield'] = [ + '#type' => 'checkbox', + '#title' => 'Enable text field', + ]; + + $form['test_button_disabled']['test_select_disabled'] = [ + '#type' => 'select', + '#title' => 'Select disabled when checkbox not checked', + '#options' => [ + 0 => 0, + 1 => 1, + ], + '#states' => [ + 'disabled' => [':input[name="checkbox_enable_select"]' => ['checked' => FALSE]], + ], + ]; + $form['test_button_disabled']['checkbox_enable_select'] = [ + '#type' => 'checkbox', + '#title' => 'Enable select', + ]; + $form['test_button_disabled']['test_textarea_disabled'] = [ + '#type' => 'textarea', + '#title' => 'Textarea disabled when checkbox not checked', + '#states' => [ + 'disabled' => [':input[name="checkbox_enable_textarea"]' => ['checked' => FALSE]], + ], + ]; + $form['test_button_disabled']['checkbox_enable_textarea'] = [ + '#type' => 'checkbox', + '#title' => 'Enable textarea', + ]; + return $form; } diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php index ab7425a252d8008c1806ac0e6f8490f48999073c..83941319792e7c2f67b62757eb8678a5852f0a7e 100644 --- a/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php +++ b/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php @@ -71,6 +71,7 @@ public function testJavascriptStates() { $this->doSelectTriggerTests(); $this->doMultipleTriggerTests(); $this->doNestedTriggerTests(); + $this->doElementsDisabledStateTests(); } /** @@ -493,4 +494,47 @@ protected function doNestedTriggerTests() { $this->assertEquals('1', $radios_opposite2->getValue()); } + /** + * Tests the submit button, select and textarea disabled states. + * + * The element should be disabled when visit the form + * then they should enable when trigger by a checkbox. + */ + public function doElementsDisabledStateTests(): void { + $this->drupalGet('form-test/javascript-states-form'); + $session = $this->assertSession(); + + // The submit button should be disabled when visit the form. + $button = $session->elementExists('css', 'input[value="Submit button disabled when checkbox not checked"]'); + $this->assertTrue($button->hasAttribute('disabled')); + + // The submit button should be enabled when the checkbox is checked. + $session->elementExists('css', 'input[name="checkbox_enable_submit_button"]')->check(); + $this->assertFalse($button->hasAttribute('disabled')); + + // The text field should be disabled when visit the form. + $textfield = $session->elementExists('css', 'input[name="input_textfield"]'); + $this->assertTrue($textfield->hasAttribute('disabled')); + + // The text field should be enabled when the checkbox is checked. + $session->elementExists('css', 'input[name="checkbox_enable_input_textfield"]')->check(); + $this->assertFalse($textfield->hasAttribute('disabled')); + + // The select should be disabled when visit the form. + $select = $session->elementExists('css', 'select[name="test_select_disabled"]'); + $this->assertTrue($select->hasAttribute('disabled')); + + // The select should be enabled when the checkbox is checked. + $session->elementExists('css', 'input[name="checkbox_enable_select"]')->check(); + $this->assertFalse($select->hasAttribute('disabled')); + + // The textarea should be disabled when visit the form. + $textarea = $session->elementExists('css', 'textarea[name="test_textarea_disabled"]'); + $this->assertTrue($textarea->hasAttribute('disabled')); + + // The textarea should be enabled when the checkbox is checked. + $session->elementExists('css', 'input[name="checkbox_enable_textarea"]')->check(); + $this->assertFalse($textarea->hasAttribute('disabled')); + } + }