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>

Tags:

Javascript

Html

Angularjs

Recent Posts