我有三个解决方案给你：

方案一：<details>和<summary>

在您的示例中，您可能应该使用<details>和<summary>元素：

label {
  display: block;
}

<fieldset disabled>
  <legend>
    Personalia:
  </legend>

  <label>Name: <input></label>
  <label>Email: <input></label>
  <label>Date of birth: <input></label>

  <label>Somethingelse: <input></label>

  <details>
    <summary>View Details</summary>
    <p>A more detailed description</p>
  </details>
</fieldset>

解决方案二：将按钮放入<legend>

如果您没有透露更详细的信息，但您想要，比方说，切换字段集的禁用，则可以在<legend> element中放置切换按钮

const fieldset = document.querySelector("fieldset");
const toggleButton = document.getElementById("toggle-button");

toggleButton.addEventListener("click", (event) => {
  fieldset.disabled = !fieldset.disabled;
  toggleButton.textContent = fieldset.disabled ? "Enable" : "Disable";
  toggleButton.setAttribute("aria-pressed", `${!fieldset.disabled}`);
});

label {
  display: block;
}

<fieldset disabled>
  <legend>
    Personalia:
    <button id="toggle-button" aria-pressed="true">
      Enable
    </button>
  </legend>

  <label>Name: <input></label>
  <label>Email: <input></label>
  <label>Date of birth: <input></label>

  <label>Somethingelse: <input></label>
  <button>This may be disabled</button> 
</fieldset>

解决方案三：使用“假”按钮

如果您的用例是完全不同的，您可以使用aria-Roles来“伪造”一个按钮role="button"(请参见ARIA button role)。请记住添加必要的辅助功能，以使没有显示屏或鼠标的用户可以单击此按钮。重要的属性是role="button"(用于屏幕阅读器)和tabindex="0"(用于键盘导航)，还请记住为keypress添加一个用于Enter和Space的处理程序，以防您的用户没有鼠标。

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>

解决方案1-在点击事件中使用图标

使用图标而不是按钮，并将click事件附加到图标。这绕过了禁用的现场设置，起到了魔咒般的作用。

<fieldset disabled='disabled'>
  <img src='/images/trash-can.png' ng-click='openModal()'/>
</fieldset>

和Java脚本(使用angularjs)

$scope.openModal = ()=>{
  // do stuff
};

解决方案2-将Bootstrap样式的SPAN与Click事件一起使用

Bootstrap可以设置跨度样式，使其看起来完全像按钮。跨度不使用或继承disabled属性。

<fieldset disabled='disabled'>
  <span class="btn btn-default" ng-click='openModal()'>
    Button Text
  </span>
</fieldset>

和Java脚本(使用angularjs)

$scope.openModal = ()=>{
  // do stuff
};

试试这个：

DEMO

Html：

<fieldset id="form">
    <legend>Personalia:</legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />

    <input id="btn1" type="button" value="See More (Enable this!!) " onclick="ButtonClicked1()" />
    Somethingelse: <input type="text" />
    <input type="button" value="View Details " onclick="ButtonClicked2()"/> 
</fieldset>

脚本：

$('#form :input').prop('disabled', true);
$("#btn1").prop('disabled', false);