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:

<fieldset ng-disabled="true">     <legend>Personalia:</legend>     Name: <input type="text"><br>     Email: <input type="text"><br>     Date of birth: <input type="text">      <input type="button" value="See More (Enable this!!) " ng-click="ButtonClicked1()" ng-disabled="false"/>     Somethingelse: <input type="text">     <input type="button" value="View Details " ng-click="ButtonClicked2()"/>  </fieldset> 

Answer 1

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>

Answer 2

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