How to enable one button inside a disabled fieldset
Solution 1 - use icons with click event
Use icons instead of buttons and attaching the click
event to the icons. This bypasses the disabled fieldset and works like a charm.
<fieldset disabled='disabled'>
<img src='/images/trash-can.png' ng-click='openModal()'/>
</fieldset>
and the javascript (using angularjs)
$scope.openModal = ()=>{
// do stuff
};
Solution 2 - use a Bootstrap-styled span with click event
Bootstrap can style a span to look exactly like a button. Spans do not use, or inherit, the disabled
attribute.
<fieldset disabled='disabled'>
<span class="btn btn-default" ng-click='openModal()'>
Button Text
</span>
</fieldset>
and the javascript (using angularjs)
$scope.openModal = ()=>{
// do stuff
};
I have 2 solutions for you:
Solution 1: Put your button inside the <legend>
label {
display: block;
}
<fieldset disabled>
<legend>
Personalia:
<button>See more</button>
</legend>
<label>Name: <input></label>
<label>Email: <input></label>
<label>Date of birth: <input></label>
<label>Somethingelse: <input></label>
<button>View Details</button>
</fieldset>
Solution 2: Use a “fake” button
You can use aria-roles to “fake” a button role="button"
(see ARIA button role). Remember to add the necessary accessibility features to make this button clickable for users without display screens or mouse. The important attributes are role="button"
(for screen readers) and tabindex="0"
(for keyboard navigation), also remember to add a handler for keypress
for Enter and Space in case your user doesn’t have a mouse.
const disabledButton = document.querySelector('.disabled-button');
const disabledOutput = document.querySelector('.disabled-output');
const enabledButton = document.querySelector('.enabled-button');
const enabledOutput = document.querySelector('.enabled-output');
function increment(output) {
const current = Number.parseInt(output.textContent);
output.textContent = `${current + 1}`;
}
disabledButton.addEventListener('click', () => increment(disabledOutput));
disabledButton.addEventListener('keypress', event => {
if (['Enter', ' '].includes(event.key)) {
increment(disabledOutput);
}
});
enabledButton.addEventListener('click', () => increment(enabledOutput));
enabledButton.addEventListener('keypress', event => {
if (['Enter', ' '].includes(event.key)) {
increment(enabledOutput);
}
});
label {
display: block;
}
[role="button"] {
-webkit-appearance: button;
appearance: button;
cursor: default;
font-style: normal;
-webkit-user-select: none;
user-select: none;
}
<fieldset disabled>
<legend>Disabled form elements</legend>
<label>Input 1<input name="input 1"></label>
<label>Input 2<input name="input 2"></label>
<button
class="disabled-button"
name="disabled-button"
>
This is disabled
</button>
<i
class="enabled-button"
role="button"
tabindex="0"
>
This is enabled
</i>
</fieldset>
<label>
Disabled button clicks:
<output class="disabled-output">0</output>
</label>
<label>
Enabled button clicks:
<output class="enabled-output">0</output>
</label>