How to enable one button inside a disabled fieldset

Question

I want to disable all the elements inside Fieldset but enable few buttons inside it. Demo:

    
Personal         


        

Answer 1

I have 2 solutions for you:

Solution 1: Put your button inside the

label {
  display: block;
}

  

    Personalia:
    See more
  

  Name: 
  Email: 
  Date of birth: 

  Somethingelse: 
  View Details 

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;
}

  
Disabled form elements

  Input 1
  Input 2
  
  
    This is disabled
  

  
    This is enabled
  



  Disabled button clicks:
  
0



  Enabled button clicks:
  
0